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FFIEIINIAIN/IEINITOS 


Sobre aK19 

A K19 e uma empresa especializada na capacita^ao de desenvolvedores de software. Sua equipe 
e composta por profissioiiais formados em Ciencia da Comptitagao pela Universidade de Sao Paulo 
(USP) e que possuem vasta experiencia em treinamento de profissioiiais para area de TI. 

O principal objetivo da K19 e oferecer treinamentos de maxima qualidade e relacionados as prin- 
clpais tecnologias utilizadas pelas empresas. Atraves desses treinamentos, seus alunos tornam-se 
capacitados para atuar no mere ado de trabalho. 

Visando a maxima qualidade, a K19 mantem as suas apostilas em constante renova^ao e melho- 
ria, oferece instalagoes fisicas apropriadas para o ensino e seus instrutores estao sempre atualizados 
didatica e tecnicamente. 
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Segura Treinamento 

Na K19 o aluno faz o curso quantas vezes quiserl 

Comprometida com o aprendizado e com a satisfa^ao dos seus aluno s, a K19 e a unica que pos- 
sui o Seguro Treinamento. Ao contratar um curso, o aluno podera refaze-Io quantas vezes desejar 
mediant e a disponibilidade de vagas e pagamento da franquia do Seguro Treinamento. 

As vagas nao preenchidas ate um dia antes do irncio de uma turma da K19 serao destinadas ao 
alunos que desejain utdizar o Seguro Treinamento. O valor da franquia para utilizar o Seguro Treina¬ 
mento e 10% do valor total do curso. 
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Termo de Uso 


Termo de Uso 

Todo o conteudo desta apostila e propriedade da KI9 Treinamentos. A apostila pode ser utilizada 
livremente para estudo pessoal. Alem disso, este material didatico pode ser utilizado corno material 
de apoio em cursos de ensino superior desde que a instituigao correspondente seja reconhecida pelo 
MEC (Ministerio da Educaqao) e que a K19 seja cltada explicitamente como proprietaria do material. 

E proibida qualquer utilizagao desse material que nao se enquadre nas condiqoes acima sem 
o previo consentimento formal, por escrito, da K19 Treinamentos. O uso indevido esta sujeito as 
medidas legais cabiveis. 
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*W Sites e Aplicacoes Web 


Normalmente, as pessoas utilizani o ternio site quando se refereni a blogs, sites de noticias, sites 
institucionais, portais, lojas virtuais, entre outros. Ja a denominagao aplicagao web e muito utiiizada 
para sistemas de gestao empresarial que sao acessados atraves de navegadores (browsers). 

Nao ha uma defmigao exata que diferencie claramente sites e aplicagdes web. Alguns defendem 
que os sites sao read-only (somente leitura) enquanto as aplicacoes web sao read-write (leitura e 
escrita). Nessa definigao, os sites apenas fornecem conteiido enquanto as aplicagdes web podem 
fornecer e/ou receber conteudo. 

Seguindo essa linha de racioclnio, algumas pessoas gostam de utilizar o grau de interatividade 
com os usuarios para classificar corno site ou aplicagao web. Nessa visao, aplicagdes web seriam 
mais interativas e os sites menos interativos. Contudo, nao ha uma medida definida para calcular 
esse grau de interatividade e com isso aplicar de forma objetiva essa classificagao. Dessa forma, essa 
diferenciagao, na pratica, e subjetiva. 

Outras pessoas preferem utilizar o criterio do proposito para classificar como site ou aplicagao 
web. Por exemplo, se o proposito e divulgar as informagoes de uma empresa, os dados de um pro- 
duto, as noticias de um determinado assunto, utiliza-se o termo site. Se o proposito e criar uma 
ferramenta para controlar as atividades administrativas de uma organizagao, utiliza-se a denomina- 
gao aplicagao web. 

Utilizando o criterio do proposito para classificar como site ou aplicagao web, podemos concluir 
que, geralmente, os sites necessitam de uma interface mais atrativa pois normalmente estao li ven- 
dendo” alguma coisa ou alguma ideia. Por outro lado t na maior parte dos casos, o mais importante 
para as aplicagdes web e possuir uma interface facil de utilizar. 

Independentemente do criterio de classificagao utilizado, os topicos discutidos nesse treina- 
mento sao importantes tanto para o des envoi vim ento de sites quanto para o des envoi vim ento de 
aplicagdes web. Portanto, do nosso ponto de vista, essas diferengas nao serao tao relevantes. 
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Figum 1.2: Aplicaqoes Web 
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Navegadores e Dispositivos 


As pessoas acessam sites e aplicagoes web atraves de navegadores (browsers) como Chrome, 
Firefox, Internet Explorer e Safari. Normalmente, esses navegadores possuem algumas diferengas 
na forma de exibir as paginas web aos usuarios. Antigamente, essas diferengas eram maiores. Com 
o passar do tempo, os navegadores ficaram cada vez mais parecidos nesse aspecto. Contudo, os 
desenvolvedores web ainda devem tomar cuidado com essas diferengas. 



Figum 1.3: Indice de utilizapaa dos navegadores em Qutubro de2013 (fonte http: f/gs . statcounter . com/; 


Outro problenia de compatibilidade importante e causado pela grande variedade de dispositivos 
que podem ser utilizados para acessar os sites e as aplicagoes web. Atualmente, as pessoas acessam 
os sites e as aplicagoes web atraves de computadores tradicionais, tablets, celulares, televisores, entre 
outros. Esses dispositivos possuem telas de tamanhos diferentes. Dessa forma, os desenvolvedores 
web devem considerar essas diferengas 11 a criagao das paginas web. Hoje em dia f fala-se nmito de 
design responsive. Os sites on as aplicagoes web sao ditos responsivos se eles estao preparados para 
diferentes tamanhos de tela. 



Fignra 1.4: Design Responsivo 
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*# Web Servers e HTTP 


Os sites e as aplicagoes web sao implantados em computadores conectados a Internet on a uma 
rede privada qualquer (Intranet). Normalmente, os sites sao implantados em computadores conec¬ 
tados a Internet pois assim poderao ser acessados praticamente de qualquer lugar do mundo. Por 
outre lado, as aplica^oes web, muitas vezes, sao implant ad as em computadores conectados a uma 
Intranet pois e comum ser necessario restringir o acesso externo a elas. 



Figum 1.5: Internet 



Fignm 1.6: Intranet 


Os computadores nos quais os sites e as aplica^oes web sao implantados sao chamados de Web 
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Servers. Quando acessamos uma pagina web atraves de um navegador, ele realiza uma requisigao 
ao Web Server onde essa pagina esta armazenada. Ao receber a resposta do Web Server com a pagina 
web solicitada, o navegador a exibe para nos. As mensagens de requisigao e resposta trocadas entre 
o navegador e o web server sao definidas pelo protocolo HTTP. 



GET /citraos/It02 H7TP/1 1 
Host-: hl9.con.br 


Requisigao HTTP 




HTTP/l,1 200 OK 

Date: Hon, 23 May 2014 22:33:34 GMT 
Server: Apache/l.3.3.7 (Unix) (Red-Hat/Linux) 
Last-Moditied: Wed, OS Jan 2014 23:11:55 GMT 
Content-Type: text/html; charset=UTF-S 
Content-Length: 131 
Connection: Keep-Alive 


<htuil> 

<head> 

<title>KlS - Treinanientos</title> 

<t head> 

<Jn>dy> 

KO2 - Desenvoivrirnento Well con HTML, CSS e JavaScript 
</body> 

<yhtna> 


Figura 1.7: fritera^ao entre os navegadores e os Web Servers 


Considere um site ou uma aplicagao web implantado em um Web Server que esta conectado a 
uma rede. A principio, qualquer navegador executando em um dispositivo conectado a essa rede 
pode realizar requisites a esse Web Server. 

Alguns softwares especializados sao utilizados para administrar os sites e as aplicagoes web im- 
plantadas nos Web Servers. Os principal sao o Apache HTTP Server da Apache Software Founda¬ 
tion e o Internet Information Services (IIS) da Microsoft, 


Dominios e enderegos IP 


Os dispositivos conectados a uma rede sao identificados atraves de enderegos fonnados por 
sequencias de numeros. Esses enderegos sao chamados de enderegos IP. Em uma Intranet, quern 
controla os enderegos IP dos dispositivos conectados e a propria organizacao que administra essa In¬ 
tranet. Por outro lado, os enderegos IP dos dispositivos conectados a Internet sao gerenciados pelos 
proved ores de acesso (ISP). 
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IP; 63.250.139.96 

Figura 1.8: Endereqos IP 


A principles para acessar uma pagina de um site on de uma aplicagao web, devemos conhecer o 
enderego IP do Web Server que contem esse site ou essa aplicagao web. Atualmente, o enderego IP do 
Web Server onde o site da K19 esta implantado e 184,72,247,119. Podemos utilizar esse enderego IP 
para acessar as paginas do site da K19, O enderego IP 200.144,183,244 esta vinculado a um dos Web 
Servers onde o site da USP esta implantado. Tambern podemos acessar as paginas do site da USP 
utilizando di ret ament e esse endereco IP Anal o gam ente, podemos acessar as paginas da Wikipedia 
utilizando o endereco IP 208,80,152,130. 


Mflvfi giia x . 



C ^ 1S4.72.247.119 = 






Web Server da K19 
IP: 1S4.72.247.119 


Figura L9: Acessando o Web Server da K19 pelo endereco IP 
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fP: 200.144.1S3.244 

Figura LW: Acessando o Web Sender da USP peto ender&p IP 


tovf iji.il j tt w 



IP: 20S.S0.152.130 

Figura Lll: Acessando o Web Server da Wikipedia pelo endere$o IP 


Se voce tiver uma memoria muito boa pode decorar os endere^os IP dos sites que acessa com 
maior frequencla. Mas, para maior parte das pessoas, seria impossivel decorar tantos numeros, Para 
resolver esse problema, os endere^os IP sao associados a dominios. Veja alguns exemplos de domi- 
nios. 


* www.k 19,com.br 


* www.usp.br 


* www.wikipedia.org 


As pessoas conseguern decorar ou deduzir os dominios bem mais facilmente do que os enderecos 
IP 
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www.kl9xom.br 

Figum L12: Acessando o Web Server da Kt9 pelo dommio 


Pltoiguia x 




Web Server da U5P 
www.usp.br 


Figura L13: Acessando o Web Saver da USP pelo dommio 


Uevt g** k 



wvww.wikipedia.org 

Pi gum L14: Acessando o Web Server da Wikipedia pelo dommio 


Ha uma outra vantagem importable dos dommios sobre os enderegos IP. Em alguns casos, o en~ 
dereqo IP de urn Web Server precisa ser alterado. Geralmente > essa modificagao ocorre por motivos 
tecnicos. Supondo qne essa mudan^a ocorra, quern estiver acessando esse Web Server atraves do 
endere^o IP antigo nao conseguira mais acessa-Io dessa forma, Por outro lado, quem estiver aces¬ 
sando esse Web Server atraves do dommio dele podera continuar acessando da mesma forma pois 
esse dommio pode ser facilmente associado ao novo endere^o IP. 
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wwwM9, com.br 
IP; 57.250,252.0 


Figura 1.15: Aitemgfio do Web Server 


Os donunios sao controlados por organlza^oes geralmente vinculadas ao governo. Por exemplo, 
os dommios .hr sao controlados e disponibilizados pelo Registro de Dominios para a Internet no 
Brasil (registro,hr}. 


*3P DNS (Domain Name System) 


Como vimos, podemos acessar um Web Server diretainente atraves do sen endereco IP ou indi- 
retamente atraves de um dominio. Para utilizar a segunda abordagem, e necessario consultar um 
servidor DNS para “traduzir" o dominio desejado para o endereco IP correspondente. Basicamente, 
a tarefa dos servidores DNS e informar o endereco IP associado a um dominio. 
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Figura 1JG: Intera^ao entre os navegadores e os servidores DNS 


Ha diversos servidores DNS que sao publicos. Eis umalista com alguns deles. 

» OpeilDNS (208.67.222.222 e 208.67.220.220) 

♦ Google Public DNS (8.8.8.8 e 8.8.4.4) 

♦ Level3 (209.244.0.3 e 209.244.0.4) 


°W Servigo s de Hospedagem 


Uma organizacao pode possuir computadores atuando como Web Servers em sua propria infra- 
estrutura on na infraestrutura de empresas especializadas. Em determinadas situagoes, a primeira 
possibilidade e mais conveniente. 

Por exemplo, normalmente, as iiistituigoes bancarias preferem manter os seus sites e as suas 
aplicagoes web em Web Servers dentro da sua propria infraestrutura. Essa abordagem permite urn 
controle maior da comunicagao entre essas institulgoes e os sens clientes. Mas, ela exige grandes 
investimentos. Para garantir que os seus Web Servers estejam sempre funcionando, essas institulgoes 
bancarias mantem profissionais 24 horas por dia 7 dias por sernana (24/7). Caso contrarlo, os sites 
ou as aplicagdes web dessas instituicoes podem dear fora do ar e gerar grandes prejuizos. 

Por outro lado f muitas vezes, e mais conveniente manter os Web Servers de uma organizagao na 
infraestrutura de uma empresa especlalizada. Dessa forma, a responsabilidade de mante-los fun- 
cionando e delegada a essa empresa. Essa abordagem, geralmente, diminui os custos. Contudo, o 
controle e delegado a uma outra empresa. O servigo oferecido por essas empresas e denominado 
servigo de hospedagem. Eis uma lista de empresas que oferecem esse tipo de servigo. 

* Amazon 
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* Local web 

* UOL 


SEO (Search Engine Optimization) 


Hoje em dia, a principal forma de encontrar um site e utilizar alguma ferramenta de busca. A 
mais importante delas, atualmente, e o Google. Essas ferramentas encontram os sites que possuem 
conteiido relacionado as palavras chaves utilizadas nas buscas. Os sites mais relevantes sao apresem 
tados antes e com maior destaque. 

Para responder rap id am e rite as consultas realizadas, as ferramentas de busca analisam previ- 
amente os sites. Esse processo de analise e chamado de indexagao, A indexagao e realizada por 
programas de computador que interagem com os sites para obter informagdes sobre o conteiido de 
cada um deles. Esses programas sao chamados de robos. 



Figura 1.17: Robos 


No desenvolvimento de um site, podemos aplicar tecnicas que facilitam e rnelhoram a analise 
dos robos das ferramentas de busca. Essas tecnicas sao des envoi vidas pel os especialistas em SEO 

(Search Engine Optimization). 

Normalmente, as tecnicas de SEO sao mais importantes para os sites do que para as aplicagoes 
web. 


Arquitetura Web 


Vamos utilizar um diagram a para apresentar uma visao geral da arquitetura web. 
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Server Side 


Client Side 


Figuru Li8: Dia gramageraldaarquitetura web 


Clica em links e botOes, 
Preenche formularies 


Navegador 


Usuario 


HTML 

Flash 

JQu ^ Applets 

Javascript 

Action script 
CSS 


Observe que o diagrama foi dividido em duas partes: client side e server side. Alguns profissi- 
onais se especializam no client side e outros no server side. Outra denominaqao possivel para client 
side e front-end e para server side 6 back-end. 

Por exemplOj um web designer deve ter bons eonhecimentos do client side. For outro lado, urn 
programador web deve ter bons eonhecimentos do server side, 

Geralmente, os web designers nao precisam ter conhecimento do server side mas te-lo pode ser 
util. Por outro lado h os programadores web precisam conhecer razoavelmente bem o client side. 
Nesse treinamento, estamos Mteressados especificamente no client side. 


Ativando o IIS e ASP Classic no Windows 7 


Se voce quiser utilizar o Windows 7 para fazer os exercicios dos proximos capitulos, instale o IIS 
e o ASP Classic de acordo com os passos a seguir. 

No menu Iniciar, clique em Painel de Condole. 
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f Pontode-Partida ► 

fi Jl 

M3 

Ccnectar a um Projetor 

UM 

Calculadora 

m 


Documentor 

N ota s Auto ad esivas 


Ferrsmenta de Captura 

■o f Paine 

. * ^ Vi eu a 1 izad o-r )f P £ 

Imngens 

Mu sicas 

Computador 

Painel de Contro-e 

Windows Fai and Scan 

Drsposftrvos e Imp ressoras 

M ConexS o de Area de Tra ba Iho 

Remota 

Programas Padrao 

Lupa 

Ajudn e Supcrtc 

^ Tod os os Programas 


| |Pej4jJiJC7^ programas e arqyfrtzs fi | 

Pesltgar' 

l - - 



No Paine l de Controle, clique em Pro gramas. 



Si stem a e Seguranga 

Verificar o status do computed or 
Fazer backup do computador 
Encontrar e corrigir prob'emas 



Contas de Usuario e Seguranga Familiar 

^ Adkionar ou remover contas de usuario 
'0 1 Configurar controles dos pais para qualquer 
usuario 



Rede e Internet 

Exibi r o statu s e a s ta ref a s d a rede 
Escoher op^oes de grupo dornestico e de 
compartilhamento 



Aparencia e Persons I izagao 

Altera ro tema 

Alterarplano defundo da area detrabalho 
Ajustar a resolu5ao da tela 


/ Hardware e Sons 

Bp Exi bi r i m p resscra s e d isp&sitivos 
4 Ad i cion a r urn dispositive- 

Ajustar as configurator de mobilidade comumente 
usadas 


^Programas^ 

Desinstalar urn pro gram a 



Relogio, Idioma e Regiao 

Alterarostecladc-s ou outros metodos de entrada 
Alterar idioma da exibi 5 ao 



Facilidade de Acesso 

Permits que o Windows sugira configurates 
Qtimizar exibi^ao visual 


Em Programas, clique em Ativar ou desativar recursos do Windows . 


Pro gramas e Recurs o: 

Desins-talar urn programs f 

Executar programas criados para versces anterlores do windows 




Ati va r 0 u d esativa r recu rsos d q Vfi n d ow s 1 Exi bi r a tu a I iza ge es i n sta I a d as 


Lcrnc instalar um pro-grama 



Programas Padrao 

Alterar as configuragoe^ padrao para a midia ou os disposition 

Fazer com que um tipc de arquivo sempre seja aberto em um programa espedfico 

Definir o s programas padrao 


a Gadgets da Area de Trabalho 

Adicionar gadgets, a area detrabalho O-bter mars gadgets ontfne Desinstalar um gadget 

RestaLirar gadgets da area detrabalho in sta I ados com c Windows 
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Aguarde o carregamento da lista de recursos que podem ser ativados ou desativados. 



Selecione os recursos de acordo com a imagem a seguir e clique no botao OK 



Aguarde a ativagao dos recursos selecionados. 
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£51 Recursos do Windows j □ | B || S3 | 

At \va r ou des aliva r recu rsos d o Wi nd ows @ 

Para ativar urn recursD, marque sua caixa de sesegao. Para desativar urn 
recurso. desmarque sua caixa de selegao. Uma caixa preenchida signifies 
quesomente parte do recursc esta ativada. 

5S RIP de Escuta *1 

0 Q(. Servi^o deAtrva^ao de Processor do Windows 
is B1 i. Serves de Impressao e Documentos 

Microsoft Windows 

Aguarde en quanto o Windows faz a Iterates 
nos recu 1 505.1550 pode demorar varies 
minutos. 


| C'ancelar 

- [Vj n iTr oiiWL - 

[Hi. Server-Side In eludes 
E I 4 Recu rsoE HTTP Csmuns 
EE® Segursn^n 
S ELM Servidor FTP 

m Services TCPP simples (echo, daytime etc.) 
mu Servi^os XPS 

0 Djt Servi d o r d c M SM Q (Mi cro soft M essa g c Qu eu e) 
m Servidor Tel net 
mu n;,. vne 


OK _| | Cnncelnr | 


Depois do termino da ativacao, abra um navegador e acesse o enderego http: //localhost. 
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Instala^ao do Apache HTTP Server no Ubuntu 13.04 


Se voce quiser utilizar o Ubuntu 13.04 para fazer os exercicios dos proximos capitulos, instate o 
Apache HTTP Server de acordo com os passos a seguir. 

Abra urn terminal e digite os seguintes co man dos. 


sudo apt-get update 


sudo apt-get install apacheZ 


sudo apt-get install php5 libapacheZ-mod-php5 


sudo service apacheZ restart 


Configura^ao do Userdir 

Configure o userdir do Apache HTTP Server seguindo passos abaixo. 


sudo service apacheZ restart 


nrkdir -/public_html &£ chmod 0755 ~/public_html 


Apache HTTP Server no Mac OS X Mountain Lion 


Se voce quiser utilizar o Mac OS X Mountain Lion para fazer os exercicios dos proximos capitulos, 
configure o Apache HTTP Server de acordo com os passos a seguir. 


1. No diretorio /etc/apaehe2/users/, crie urn arquivo de configuragao com o nome do seu usuario 
(ex: jonas.conf). 


1 <Directory "/Users/nome_do_usuario/Sites/ 11 > 

2 Options FollowSymLinks Indexes MultiViews 

3 AllowOverride All 

4 Order allow 3 dercy 

5 Allow from all 

6 </Directory> 


CodigoXML L l: nome_do_ usuario, conf 


2. Altere as permissoes do arquivo criado anteriormente. 


sudo chmod 644 nt>me_do_usuario„ conf 


3. Localize, no arquivo /etc/apache2/httpd,conf, a linha: 


1 #LoadNodule php5_module libexec/apacheZ/libphpS.so 
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4. Descomente a linha encontrada anteriormente. 


1 LoadModule php5_nnodule 1ibexec/apache2/libphpS . so 


5. Crie urna pasta chamada Sites na pasta do seu usuario. 


mkdir '/Si 


6. Inicie o Apache HTTP Server. 


7, Configure o Apache HTTP Server para iniciar automaticamente. 


sudo defaults write /System/L ibrary/LaunchDaemons/org , apache , httpd Disabled -bool false 


Resumo do Capitulo 


Nao ha um criterio exato para diferenciar o que e um site e o que e uma aplicagao web. 


► Os desenvolvedores web devem considerar as diferengas entre os navegadores (browsers] e os 
disposifivos {computadores, tablets, celulares, tvs, entre outros) na criagao das paginas web de um 
site ou de uma aplicagao web. 


> 

► 


A Internet e a maior rede publica de computadores. 


Uma rede privada de computadores e denominada Intranet 


Os sites e as aplicagoes web sao implantados ern computadores denominados Web Servers. 


As mensagens trocadas entre os navegadores e os Web Servers seguem o protocolo HTTP. 


Os dispositivos conectados a uma rede de computadores sao identificados atraves de enderegos 


IP. 


> 


Para nao ter que decorar enderegos IP podemos utilizar dominios. 


A utilizagao de dominios facilita uma eventual troca do enderego IP de um Web Server. 
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A funcao principal de um servidor DNS e traduzir dommios para enderegos IE 


(!► Organizagoes de grande porte cost uma implantar os sens sites e as suas aplicagoes web em Web 
Servers dentro da sua propria infraestrutura. For outro lado, organizagoes menores, normalmente, 
preferem contratam enipresas especializadas no servigo de hospedagem. 


As tecnicas de SEO sao aplicadas com o intuito de inelhorar o posicionamento de um site nos 
resultados das consultas realizadas nas ferramentas de busca. 




Podemos dividir a arquitetura web em duas partes: client side e server side. 


O Prova 


| Qual alternativa esta correta? 

a) Existe uma divisao clara e exata entre o conceito de site e aplicacao web. 

b) Geralmente, os sites possuem inaior grau de interatividade com o usuario do que as aplicagoes 
web, 

c) As aplicagoes web nao sao utilizadas como ferramentas para controle administrative de uma 
empresa. 

d) Geralmentep os sites "vendem" algum produto ou alguma ideia. 

e) Geralmentep as aplicagoes web “vendem" algum produto ou alguma ideia, 

| Qual alternativa esta correta? 

a) A forma de exibicao das pagina web e padrao em todos os navegadores. 

b) A forma de exibicao das pagina web e padrao em todos os dispositivos, 

c) O Design Responsive trata de questoes relacionadas a performance dos sites. 

d) O Design Responsivo trata de questoes relacionadas a performance dos navegadores. 

e) Os sites ou as aplicagoes web sao ditos responsivos se eles estao preparados para diferentes 
tamanhos de tela, 

Q Qual alternativa esta correta? 

a) HTTP e protocolo de comiinicagao. 
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b) A Internet e uma rede de computadores privada. 

c) Os sites e as aplicagoes web sao implantados em Web Computers. 

d) Aplicagoes web so podem ser impLantadas em redes privadas. 

e) Sites so podem ser implantados na Internet. 

| Qual alternativa esta correta? 

a) O endere^o IP de urn dispositivo determina precisamente a localizagao geografica desse dis- 
positivo. 

b) O conteudo de um site e determinado pelo dominio associado ao Web Server onde esse site 
esta implant ado. 

c) Dominios sao associados a enderegos IP 

d) Para aplica$oes web devemos utilizar dominios especiais. 

e) To do dominio inicia com www. 

| Qual alternative esta correta? 

a) A fun^ao principal de um servidor DNS (Domain Name System) e informar o noine do propri¬ 
etor io de um site. 

b) O objetivo principal das empresas que fornecem servigos de hospedagern e vender dominios. 

c) Tecnicas de SEO melhoram a velocidade de carregamento de um site, 

d) Tecnicas de SEO melhoram o posicionamento dos sites nas ferramentas de busca. 

e) O objetivo das empresas especializadas em SEO e oferecer servigos de hospedagern. 


| Qual alternativa esta correta? 


a) E comum dividir a arquitetura web em left side e right side, 

b) E comum dividir a arquitetura web em down side e up side. 

c) E comum dividir a arquitetura web em outside e inside. 

d) E comum dividir a arquitetura web em alien t side e server side. 

e) E comum dividir a arquitetura web em front side e back side. 


Minha Pontuacao 


Pontuagao Minima: 



Pontuacao Maxima: 



8KI9 www. f ac ebook. com/k 191rei nam entos 


19 







INTRGDUQAO 


20 


20 


www.k19.com.br NCI9 




HTML 



*W Introdu^ao 


Quando acessamos uma pagina web, estamos interessados na informapao contida nessa pagina. 
Essa informacao pode estar na forma de texto, imagem ou video, O conteudo de uma pagina web e 
definido com a linguagem HTML (HyperText Markup Language). HTML e uma linguagem de mar- 
cagao originalmente proposta por Tim Berners-Lee no final da decada de 1980. O objetivo do Tim 
Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que 
quisesse dlsseminar documentos cientificos. 

Desde sua proposta ate os dias de hoje, a linguagem HTML sofreu diversas alteragbes, A cada 
versao, novos recursos sao adicionados e problemas corrigidos. A versao mais atual da especifica^ao 
da linguagem HTML e a 5. Essa versao ainda nao foi finalizada, a previsao e que ela seja lancada em 
definitivo em Julho de 2014. Porem, os navegadores ja impiementam diversos recursos do HTML5. 
Aespecificacao esta disponivel no endere^o http: //www. w3 .org/TR/htmlS. 

As especificagdes da linguagem HTML sao publicadas pelo World Wide Web Consortium mais 
conliecido por sua sigla W3C. Alem do HTML, o W3C tambem e responsavel por linguagens como o 
XML, o SVG e pela interface DOM (Document Object Model), por exemplo. 


Estrutura Basica 


Basicamente, um documento HTML e composto por elementos hierarquicamente organizados. 
Para inserir um elemento em um documento HTML, devemos utiLizar as tags correspondentes a 
esse elemento. As tags sao definidas com parenteses angulares (< e >). Os elementos podem possuir 
atributos e conteudo. Os atributos sao formados por nome e valor. Normal men te, os valores dos 
atributos sao definidos dentro de aspas dupla e o conteudo dos elementos e um texto ou outros 
elementos. 
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Figurn 2.1 ; Estrutum bdsica de um doc it men to HTML 


& ^ O K.19 Treinamentoa 

<- -> C D local host; - ke \zof Kt m I /pufc I icjirm I /estrutura-bas ica.html 0, ^ Q -% = 


K02 - Desejivolvicae/ito Web com HTML, CSS e JavaScript 


Figum 2.2 : Esfrufuru Msicu rfe um documen to HTML 


Mais Sobre 

A especificacao do HTML5 define duas sintaxes distintas para produzir documentos 
HTML. A primeira e denorainada sintaxe HTML e a segunda e denominada sintaxe 
XHTML. A maior parte dos autores recomendam a utiliza^ao da sintaxe HTML, Nos exemplos 
e nos exereicios dess a apostila, a preferencia sera pela sintaxe HTML. 
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Mais Sobre 

De acordo com a especifica^ao da linguagem HTML, alguns elementos sao denomina- 
dos Normal Elements. Esses elementos sao abertos com uma tag e fechados com 
outra tag. Por exempio, o elemento p e um Normal Element. Observe a utiliza^ao da tag de 
abertura e da tag de fechamento do elemento p, 

1 | [<p>| K02 - Desenvolvi men to Web com HTML . CSS e JavaSc ri pt |</p?j j 


Mais Sobre 

Ha tambem elementos denominados Void Elements. Esses elementos nao possuem 
conteudo, Na sintaxe HTML esses elementos sao abertos e fechados com apenas uma 
tag com on sem o caractere Um exemplo de Void Element e o elemento br. 


1 <p> 

2 KOI - Ldgica de ProEramagao :<br>] 

3 K02 - Desenvolvimento Web com HTML * CSS e Ja vaScr ipt [<br />] 

4 K03 - SQL e Modelo Relational 

5 </p> 


Os Void Elements sao: area, base, br, eol, embed, hr, img, input, keygen, link, meta, 
param, source, track, wbr. 

Na sintaxe XHTML, os Void Elements podern ser abertos e fechados na mesma tag on em tags 
separadas. Contudo, o caractere *7" e obrigatorio. 

1 kp> 

2 KOI - Ldgica de Prograntagao j<br />] 

3 K02 - Desenvolv imento Web com HTML, CSS e JavaScr lpt f<br></br>[ 

4 K03 - SQL e Modelo Relacional 

5 </p> 


<1D0CTYPE> 

Para um navegador exibir corretamente uma pagina web, devemos Informar explicit amente o 
tipo do documento. O tipo do documento e informado com a declara^ao <!DOCTYPE>. Quando 
conveniente, discut ire mos as principais diferen^as entre os tip os de documentos mais importantes. 
Veja a declaiagao <IDOCTYPE> para os principais tipos de documentos. 

1 |<iDQCTYPE html> | 

Codigo HTML 2J: HTML 5 


1 <!DOCTYPE HTML PUBLIC " -//W3C// DTD HTML 4.01//EN 

2 17 http : //www . w3 . org/TR /html4/ strict . dtd l7 > 


Codigo HULL 2.5: HTML 4.01 Strict 


1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

2 17 http : //www . w3 . org/TR /html4 / loose . dtd J| > 


Codigo HTML 2.6: HTML 4.01 Transitional 
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1 <!DQCTYPE HTML PUBLIC ,J -//W3C//DTD HTML 4. 01 Frameset // EN' 1 2 3 4 5 6 7 

2 " ht tp : / /www ,w3, org/TR/html4/frameset . dtd "> 


Codigo HTML 2.7: HTML 4.01 Frameset 


1 < ! DQCTYPE html PUBLIC " -//W3C// DTD XHTML 1. 0 Trans i tional//EN J| 

2 "http: //www. w3 . org/TR/ xhtml 1 / DTD/xhtml 1 - transitional . dtd"> 


Codigo HTML 2.8: XHTML 1.0 Transitional 


1 <!DQCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN " 

2 "http : / /www. w3 , org/TR/ xhtml 1 / DTD / xhtml T - frameset , dtd H > 


Codigo HTML 2.9: XHTML 1.0 Frameset 


1 <!DOCTYPE htffil PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

2 " http : / /www . w3 . org/TR / xhtml 1 1 / DTD / xhtml 1 1 . dtd " > 


Codigo HTML 2JO: XHTML 1J 


<html> 

Os elementos HTML, com exce^ao do DOCT YPE, devem ser inseridos no conteudo do e lenient o 
lilml. Esse elemento e aberto com a tag <html>, fechado com a tag e deve conter exata- 

mente um elemento head seguido de exatamente um elemento body. 

Diversos autores recomendam a utiliza^ao do atributo lang. Esse atributo indica a lingua utili- 
zada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de tradugao 
de texto podem utilizar esse atributo para descobrir facilrnente em qual lingua os textos contidos no 
documento HTML ou na maior parte dele foram escritos. 



<head> 


A principal fungao do elemento head e agrupar informagoes sobre o documento HTML (metain¬ 
fo rma^ao). Sao exemplos de metainformagdes: o encoding, a taxa de atualizagao, o autor, a descrigao 
e as palavras chaves do documento HTML. 

1 

2 

3 

4 

5 

6 

7 


<head>] 


<meta http -equiv = 1 "Content-Type" content^" text /htmi ; charset = UTF -B ' 1 > 
<meta http -equiv = 1,1 refresh ,f content = ,r 30 H > 

<meta name = " author " content^" Rafael Cosentino JI > 

<meta name = " desc ri ption " content ="Cursos de Java e .NET' r > 

<meta n a me = 1,1 keywords" content^ " curso java, curso C#" > 

</head>] 
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HTML 


O elemento head e aberto e fechado pelas tags <head> e </head> respectivamente. Gbrigatoria- 
mente, salvo algumas poucas excecbes, o corpo do head deve conter exatamente uma ocorrencia do 
elemento title. Esse elemento define o titulo do documento HTML. 


1 

2 

3 

4 


<head> 

[< t i tle >K19 Trelttan&ntos</ 1 i tle >| 
</head> 


<body> 

O conteudo de uma pagina web deve ser definido no corpo do elemento body. For exemplo, 
podemos inserir no corpo do body cabegalhos, textos, listas, tabelas, entre outros componentes. 
Esse elemento e aberto pela tag <foody> e fechado pela tag </body>. 

1 [<body_>] 

2 <h1>K02 - Desenvolvimento Web com HTML r CSS e JavaScript</hi> 

3 [</body >"| 


Comentdrios 

Podemos adicionar comenlarios em um documento HTML dentro das tags <[-- e —>. Os comem 
tarios sao ignorados pel os navegadores. 


1 

<!DOCTYPE html> 

2 

<html lang = jr pt-br ,r > 

3 

<head> 

4 

f<!— corpo do head —>] 

5 

</head> 

6 

<body> 

7 

[<!-- corpo do body -->] 

8 

</body> 

9 

</html> 


EditoresHTML 


Documentos HTML podem ser criados em qualquer editor de texto basico. Contudo, para ga- 
nhar produtividade, podemos utilizar ferramentas com mais recursos. Ha diversas op^oes de edito- 
res HTML, alguns gratuitos outros pagos. Nesse treinamento, utiiizaremos o Netbeans como editor 
HTML. Na verdade, o Netbeans oferece muito mais recursos alem do editor HTML. Contudo, agora, 
nao estamos interessados nesses outros recursos. Voce pode obter gratuitamente o Netbeans no em 
dere^o https://netbeans.org/. 


Ferramentas de Desenvolvimento Web 


Hoje em dia, os principais navegadores possuem ferramentas para testar e depurar as paginas 
web e a intera^ao com os Web Servers. Nos exemplos dessa apostila, utiiizaremos Chrome DevTools 
do navegador Chrome. Otitra ferramenta muito importante e o Firebug do navegador Firefox, 
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Exercicios de Flxa^ao 


Q Abra o Nelbeatis e crie uni projeto chamado html. 


Import ante 

,4; j % No Windows h utilizando o IIS (Internet Information Services) conio Web Sender, voce 
deve salvar o projeto html em C:\inetpub\wwwroot. Lembre-se que e necessario 
instalar o IIS conforme vimos anterior men te. 


Importante 

No UbuntLt utilizando o Apache HTTP Server como Web Server, voce deve salvar o pro¬ 
jeto html em /home/<USUARIO>/public_html. Lembre-se que e necessario insta¬ 
lar e configurar o Apache HTTP Server como vimos anteriormente. 


j* o 



htettam IDE 7.3 

= i T ** ► » 


© 


isi_i 


Figura 2.3: Projeto html 
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ooo 

Net&eans IDE 73 


a* 

i b a a % i l 

_sj T H t K' 

. (Op Search (M + lt 

o" 



1, Choose Project 

2 . ... 


New Project 


Choose Project 



De script tan: 

Creates a new KTMLi appUcat-ion ccj-liq j cd (or HTML. CBS and Jav-aBciipL 



Figura2.4: Projeto html 



Figura 2,5: Projeto html 


Arquivo: https - //github.com/K19/K19-EKercicios/archive/k02-html-fixacao1.zip 


8KI9 www. f ac ebook. com/k 1 91rei nam entos 


27 




































































































HTML 


28 


e Edite o arquivo index.html do projeto html que esta eni Site Root, 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

11 

12 

13 


<!DOCTYPE html> 

< h t. m 1 lang=" pt -br" > 

<!— cabe^alho —> 

<head> 

<meta http-equiv = JI Content-Type" content = " text/htjnl ; charset=UTF-6 " > 
<title>K19 Treinamentos</title> 

</head> 

<!— corpo —> 

<body> 

<p>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</p> 

</body> 

</html> 


Codigo HTML 2.16: index.html 


Arquivo: https://github. com/K!9/K19-Exercicios/archive/k02-html-fixacao2.zip 


O No Windows, utilize o Chrome para acessar o enderego: 


h ttp://local host/html/piiblic_html/index. html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


http://localhost/'<U5UARIO>/htm1/public_html/index.html. 


Q Utilize o Chrome DevTools ou o Firebug para analisar e modificar os elementos do documento 
HTML. 
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Figura 2.6: Chrome DevTooh 
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Figura 2.7: Chrome DevToots 
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FiguraZ.8: Chrome DevToois 



Figura2.9: Chrome Devlhok 
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O Utilize o Chrome DevTools ou o Firebug para analisar a requisite HTTP e a resposta HTTP. 



Figura 2JO: Chrome DevToots 


® ^ ^ IKL 9 TrelnamentM * . i 

4- c j local h<JSL/~ kt i zof him!pub lk h Em Ii nd ex .hirrt | v? | ft ^ ♦ = 
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Connection; keep-alive 

Cookie PiiPSESSI D~T9rn saht c 1 Idoud B\e2ad ldh-Mi JSEE 5 IWt ED-3 7a IdeSolL-E 3fi87+tie79ae075d c4; c reeF*™_t ree- 
hi- 


HoSt: local host 
Pragma; no-cache 

User-Agent NoziLLa/5.0 (flacIncoshr Intel flac 05 X IljB_4; Apple lrfebKit/537.3B IKHTHL, like Gecko) ChrD.ee 
/2B. 9.1599. 2fl Safari/SJI.25 
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Figura 2. J1: Chrome DevTools 
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*i§ Semantica HTML 


As placas de sinaliza^ao sao fundamentals para manter a ordem no trail sit o. Cada placa possui 
urn significado especifico. A utiliza^ao equivocada das placas de tr ansi to pode causar problem as 
como colisdes de veiculos. 

Considere um cruzamento no qual e proibido virar a esquerda ou a direita (exemplo: Av. Re- 
bou^as com Av Brasil ou Av. Prof. Francisco Morato com Av. Vital Brasil). Nesse cruzamento, o 
funcionario encarregado de instalar as placas de transito decidiu utilizar a sinaliza^ao abaixo. 



Fsgura 2.12: Marcadorde perigo. 


Essa sinalizaqao esta totalmente equivocada. Ela indica a existencia de obstaculos na pista que 
obrigarn a passagem dos veiculos pelo lado direito ou pelo lado esquerdo. O motorista que conhece 
o significado correto dessa placa pode decidir virar a direita ou a esquerda e sofrer uma colisao. Para 
nao gerar confusao o funcionario poderia utilizar a placa abaixo. 



Figi t ra 2.13: Siga em /rente. 


Para manter a organiza^ao no transito, a semantica (significado) das sinalizacoes deve ser respei- 
tada. Analogamente, no desenvolvimento web, e fundamental respeitar o significado dos elementos 
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HTML. 

De acordo com a especificacao da linguagem HTML, a maior parte dos elementos possuein um 
proposito bem definido. Para o funcionamento correto das paginas de uma aplicagao web, e fun¬ 
damental respeitar o proposito de cada elemento e utiliza-lo nas condigoes corretas. Muitos autores 
utilizam o termo semantica HTML ao se referirem ao uso correto dos elementos da linguagem HTML. 

No exemplo abaixo, utilizamos o elemento p para definir um paragrafo. De acordo com a espe- 
cificagao da linguagem HTML, esse elemento deve ser utllizado justamente para definir paragrafos. 
Portanto, ele foi aplicado corretarnente. 

1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

Codigo HTML 2.17: Exemplo de uso correto da semantica HTML 


<!DOCTYPE html> 

< h t m 1 lang=" pt -br" > 

<head> 

<meta http-equiv = "Content-Type" content- 1 ’ text / html ; charset-UTF-B" > 
<title>Exemplo de uso correto da semantica HTML</title> 

</head> 

<body> 

f<p~>Este e~um texto para mostrar o signiflcado da tag p. </p>~| 

</body> 

</html> 


Agora, vejamos outro exemplo: 


1 

<!DOCTYPE html> 

2 

<html lang="pt-br"> 

3 

<head> 

4 

<meta http - equiv = ' r Con tent - Type n ' content= H text/html ; char set=UTF-8" > 

5 

<title>Meus amigos - Site do Jonas - Criado pelo Jonas</title> 

6 

</head> 

7 

<body> 

3 

[ <address> 

3 

Rafael Cosentirco 

10 

rafael.cosentino@k 1 9.com.br 

11 

Socio fundador da K19 Treinamentos 

12 

Av . Brigadeiro Faria Lima, 1571 - Jardim Paulistano - Sao Paulo, SP 

13 

CEP 01452-001 

14 

[ </address> ] 

15 


16 

[ <ad Jre ss > “ ] 

17 

f Marcelo Martins 

IS 

marcelo,martinsSkl9.com,br 

19 

[ Socio fundador da K19 Treinamentos 

20 

Av. Brigadeiro Faria Lima, 1571 - Jardim Paulistano - Sao Paulo, SP 

21 

CEP 01452-001 

22 

</ address > 

23 

</body> 

24 

</html> 


Codigo HTML2.IS: Exemplo de uso incorreto da semantica HTML 


Dessa vez, utilizamos o elemento address. De acordo com a especificacao, esse elemento deve 
ser utilizado para fornecer informagdes de contato dos autores ou donos do documento. Normal- 
mente, esse elemento aparece no inicio ou no final das paginas, 

Se observarmos o exemplo mais atentamente, trata-se de uma pagina do site do Jonas (repare no 
titulo da pagina), O autor da pagina e o Jonas e nao o Rafael ou o Marcelo. Portanto, o elemento ad¬ 
dress foi aplicado ineorretamente. Alem disso, devemos evitar o uso desse elemento para informar 
enderegos postals a nienos que essas informagoes sejam relacionadas ao autor ou dono do docu- 
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mento. 


*3P Titulos 


Assini como em um livro, uma pagina web pode conter uma hierarquia de titulos para estabelecer 
uma divisao do sen conteudo. Para inserir titulos em uma pagina web, devemos utilizar os eiementos 
hi, h2, h3, h4, h5 e h6. Os sufixos numericos de 1 a 6 indicam o nivel do titulo dentro da hierarquia 
de titulos do documento, Veja o exemplo: 


1 

<!DOCTYPE html> 

2 

< htm 1 lang = '' pt-br " > 

3 

<head> 

4 

<meta http - equi v^ 1 Content - Type IJ con t en t =" text / htjnl ; charset-UTF-fl JI > 

5 

<title>Exeinplo de titulos</title> 

6 

</head> 

7 

<body> 

3 

[<h ' >Ti tulo 1 </h1 > ] 

9 

\< h2> Tftuio 2< /F2>' ; 

10 

[<h3>Ti tu 1 o 3</h3> j 

11 

[<ft4>TIt ulo 4</h4> 

12 

(<h5>T 1 tulo 5</h5> ' 

13 

[<h6>Titulo 6</hS> ' 

14 

</body> 

15 

</html> 


Cadigp HTML 2J9: Exemplo de titulos 


E.Kcmpla de titulo-* K ^ 

C D local host.' - ke izo/ him I f pufalicjibri I /titu los. html Cl \ = 

Titulo 1 

Titulo 2 

Tftulo 3 
Titwto 4 

Tftulo 5 

Tuiiki S 


Figura 2.14: Exemplo de titulos 


Observe que os titulos nao foram exibidos iado a lado e sim um embaixo do outro. Geralmente, 
os navegadores exibem os titulos como blocos. Por padrao, esses blocos ocupam todo o espaqo ho¬ 
rizontal do elemento onde os titulos estao contidos. No exemplo, os titulos estao contidos no corpo 
da pagina. Portanto, ocupam todo o espaqo horizontal da pagina. Esse e o comportamento padrao 
dos block-level elements, Utilizando as ferramentas de desenvolvimento do Chrome, podemos vi- 
sualizar claramente esses blocos. 
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Figurn 2.15: Exemplo de dtulos 


Geralmente, os navegadores utilizam tamanhos diferentes de fonte para cada tituio. Nao exist e 
um padrao de tamanho e de fonte entre os navegadores. Em outras palavras, os titulos de uma pagina 
web podem ser exibidos de maneiras diferentes em navegadores distint os. Para padronizar a exibigao 
dos titulos, podemos aplicar as regras CSS. 

Devemos utilizar os titulos com cautela, pois eles sao usados como criterio de ranqueamento 
por buscadores como Google, Yahoo e Bing. O uso correto dos elementos de tituio e fortemente re- 
coinendado pelosespecialistas em SEO (Search Engine Optimization), Para utiliza-Ios corretamente, 
devemos respeitar basicamente as seguintes regras. 

* Manter a ordem logica dos titulos, Um elemento h2 deve ser precedido de um elemento hi. 

Um elemento h3 deve ser precedido de um elemento h2, E assim sucessivamente. 

* O tituio de uma segao deve descrever bem o conteudo dela. 

Exerclcios de Fixa^ao 


@ Crie um novo documento HTML chamado titulos.html com o conteudo abaixo no projeto html 
em Site Root. 


1 <!DOCIVPE html > 

2 <html lang = ,r pt-br" > 

3 <h»ead> 

4 <meta http-equiv = J| Content-Type ” content^ " test/html ; charset = UTF-8" > 
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5 
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<title>K02 - Desenvolvimento Web com HTML, CSS e Javascript </ title> 

</head> 

<body> 

<h1>K02 - Desenvolvimento Web com HTML t CSS e Javascript</h1> 

<p>Atualmente , praticamente todos os sistemas corporativos possuem 
interfaces web. Para quern deseja atuar no mercado de desenvolvimento 
de software, e obrigatorio o conhecimento das linguagens: HTML f CSS 
e JavaScript.</p> 

<p>Essas linguagens sao utilizadas para o desenvolvimenfo da Canada de 
apresentagao das aplicagoes web.</p> 

<h2>Pre-requisitos</h2> 

<ul> 

<li>Familiaridade con algum sistema operacional (Windows/Linux/Mac OS X)</li> 
<li>Logica de programagao</li> 

</ul> 


<h2>Agenda</h2> 


<h3>Aos domingos</h3> 

<ul> 

<li>10/11/2013 das 03:00 as 14:00</li> 
<li>23/Q2/201 4 das 14:00 as 20:00</li> 
</ul> 

<h3>Aos sabados</h3> 


<ul> 

<li>15/03/2014 das 03:00 as 14:00</ii> 
<li>26/04/2014 das 14:00 as 20:00</li> 
</ul> 

</body> 

</html> 


Codigo HTML2.20: titidosJitml 


Arqutvo: https://github,com/KI9/K19-Exercicios/archive/k02-html-fixacao6.zip 


O 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/htmI/public_html/titulas.htmL 

No Ufountu, utilize o Chrome para acessar o endereqo: 


http: //localhost/~<USLiARIO>/ht ml/pub lic_html/titulos . htmL 


Utilize o Chrome DevTools ou o Firebug para analisar os elementos que formam o documento 
HTML, a requisite HTTP e a resposta HTTP 


0 Imagine que voce possua um site de culinaria no qual voce disponibiliza algumas receitas. Crie 
uma pagina com uma receita ficticia utilizando titulos para organizar conteudo. Utilize quantos nn 
veis de titulo a char necessario. Para isso, adicione um arquivo chamado receita.html no projeto 

html em Site Root, 


1 <!DOCTYPE html> 

2 <html lang = Jr pt - br " > 

3 <head> 
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4 
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28 

29 
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31 

32 

33 

34 

35 

36 

37 

38 

39 

40 

41 

42 

43 
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Q 
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HTML 


<meta http-equiv-" Content-Type" content^" test/html ; charset=UTF-8" > 
<title>Como preparar um delicioso macarrao instantaneo em 6 min.</title> 
</head> 

<body> 

<h1>Como preparar um delicioso macarrao instantaneo em 6 min.</hl> 

<p>Com esta receita voce se tornara um profissional na arte de 
preparar um macarrao i nstantaneo.</p> 

<h2>lngredientes</h2> 

<ul> 

<li>Macarrao instantaneo da sua marca favorita</li > 

<li>600ml de agua</li> 

</ul> 

<h2>Modo de preparo</h2> 

<h3>No micro-ondas</h3> 

<p>Coloque o macarrao instantaneo em um recipiente com 600ml de agua e 
programe o micro ondas para 6 minutos, Aperte o botao iniciar ou 
equivalerite. </p> 

<h4>Dicas</h4> 

<ul> 

<li> 

Utilize um recipiente que permita o macarrao ficar totalmente 
submerso na agua, 

</li> 

<li> 

Quando ouvir o bip t nao saia correndo, 0 micro ondas nao explodira. 

0 bip significa que o macarrao esta pronto, 

</li > 

</ul> 

<h3>No fogao</h3> 

<p> 

Coloque o macarrao instantaneo em uma panela com 600ml de agua e 
leve ao fogo por 3 minutes. 

</p> 

<h4>Dicas</h4> 

<ul> 

<11 > 

Utilize uma panela que permita o macarrao ficar totalmente 
submerso na agua. 

</ li > 

< 11 > 

Nao se distraia com a televisao ou qualquer outra coisa. 

Voce podera queimar a sua refeigao 
</li > 

</ul> 

</body> 

</ tit ml > 


Codigo HTML 2.21: re.ceita. htmt 


Arquivo: https :/7github.ctwi/K19/K19-Exercicios/archive/k02-html-fi)tacaoB.zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/public_html/receita P htmL 
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No Ubuntu, utilize o Chrome para acessar o endereco: 


http://lrealhost/"<USUARIQ>/html/public_htffll/receita.html. 


Utilize o Chrome DevTools on o Firebug para analisar os elementos que formam o documento 
HTML, a requisigao HTTP e a resposta HTTP 


Paragrafos 


Os paragrafos de uina pagina web sao definidos atraves do elemento p, Assim como os titulos, 
normalmente, os navegadores definem os paragrafos como block-level elements. Dessa forma, por 
padrao, eles ocupam horizontalmente todo o espa^o do elemento pai. 

Os navegadores ajustam os textos dos paragrafos a largura do elemento pai. As quebras de linha 
necessarias sao inseridas automaticamente. Os espagos excedentes definidos em um documento 
HTML entre as palavras de uni paragrafo sao desconsiderados pelos navegadores na exibi^ao das 
paginas web. Analogamente, as quebras de linha presentes no documento HTML tambem sao des- 
consideradas pelos navegadores. 

Caso seja necessario for^ar uma que bra de linha entre duas palavras contidas em um paragrafo, 
podeinos utilizar o elemento br Quando um paragrafo content palavras muito longas, os navegado¬ 
res podem ter dificuldades para ajustar as quebras de linha. Podemos indicar explicitamente com o 
elemento wbr, como as palavras podem ser 4< quebradas”. Veja o exeinplo abaixo. 


1 
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28 

29 

30 

31 
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<!DOCT^PE html> 

<html lang=" pt-br Jl > 

<head> 

<meta http-equiv=" Content-Type" content^ 1 ' text/html ; charset = UTF-8 J| > 

<title>Exemplo de paragrafos<7title> 

</head> 

<body> 

<hl>Exemplo de paragrafos</h1> 

f <P> 

Este paragrafo serve para demonstrar a insergao 

automatica das quebras de linha. 

! 1 

Observe tambem que os espagos excedentes contidos 

no documento HTML entre as palavras 

desse paragrafo sao desconsiderados 

[ t 

i 1 

na exibigao da pagina web. 

i . . . ; 

As quebras de linha tambem sao 

desconsideradas. 0 navegador ajusta o texto 

desse paragrafo ao espago horizontal do 

corpo da pagina. 

i </p> 


<p> 

Neste paragrafo mostramos a insergao de uma quebra de linha forgada. 

[< br y .Fe rcebeu ? [< br >] .\lem disso, podemos indicar ao navegador como quebrar 
pa lavra otorri no[<ivbr^lari ngo[<wbr?jlogi sta otorrino[< wbr >jlaringo(< wbr >jl o g i s t a 
otorr i no [<wbr>| l ari ngo~ <wbr>| logi sta otorrino [< wbr ?j laringo[< wb r^jlogista 
otorrino [< wbr >| 1 aringo ^wEr^ logista otorrino [<wbTij laringo [<wbr~>| logista 
otorrino f< wbr >| 1 aringoTwFr^logista otorrino f<wE r >| 1 aringoj '<wbr ^ logista 
otorri no [<wbr>j lari ngo <wbr>jlogista . 

</p> 

</body> 

</ html > 
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Codigo HTML 2.22: Exemplo de paragrafos 


- Lmcmplo de parigrjfoi 

<- -> Q Q toci3hcMt/"4te<M/hftmi/publicJitrn I fp.htiril 'u : ^ ^ = 


Exemplo de paragrafos 

Este par%rafo serve para dcmonstrar a mscrjaa automatJca das qucbras dc Liuba. Observe tamb^m quc os cspa^os 
excedeates contidos no documento HTML earns as palavias desse pardgrafo s5o descoasidorados na exihft£&o da pdgiiia 
web. As quiibras do Udha tar nMm aSo deacons ideradiis. O navegador ajusla o lento <iessc parfigrafo ao espago hotizaatfll 
do coTpo da pagina, 

Neale par&grat'n [nos trace os a inser^3o do uma quebra de Linba for^ada. 

Fcrccbcu? 

Aldtn disso, podcmos indicar ao nave gad or eomo quebrar palaYra otocrinolaringolo-gista ot orr kuol ar tngo lo gts t a otorrino 
Iflringologksla oLorrinolaringologista oloarmolariiigologislft olorrinolaiingologista otonioolaringologistfl otomiiolaiiiigo 
Legists otorrina larin DoLciDLsCa 


Figura 2.16: Exemplo de paragrafos 


*0 Character Entities 


Para inserir determinados caracteres em um documento HTML, devemos utilizar o codigo do 
caractere desejado, A utilizagao desses codigos evita probiemas de encoding na exibi^ao das paginas 
web. Voce pode conhecer esses caracteres e os sees respectivos codigos atraves do seguinte enderego 
http: //dev,w3 .org/html5/html-author/charref. Esses caracteres sao conhecidos corno Charac¬ 
ter Entities ou HTML Entities, Veja o exemplo a seguir. 


1 

<!DOCTYPE h tml > 

2 

<html lang = "pt -br' 1 > 

3 

<head> 

4 

<meta http-equiv = ' r Content-Type r ' content- 1 ' text / html ; charset=UTF -8" > 

5 

<title>Exemplo de character entities</title> 

6 

</head> 

7 

<body> 

8 

<h1>Exemplo de character entities</hi > 

9 

<ul> 

10 

<1 i >[SiSt arf \] Sbigstar ;&flx02605 t [&#97 33 ;l</li > 

11 

<li >[&phone ;) '&¥x02 60E f >#9742 ;]</l i > 

12 

<li ^female ;*] |s#x0 264 0 ;j [&#S792 ;>/ li> 

13 

<li>f&sunE ; 1 |S#x02GGA;| |&#9B34 ;|</li> 

14 

</ul> 

15 

</body> 

16 

</html> 


Codigo HTML 2.23: Exemplo de character entities 
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0 1 n n Eke mplo de character ent K ' . 



C ■ local host '-keiz-oyhLrtil/C'iJtiljc.litml/character-entities, html 

Gl * i 0 ' 

i ■* = 

Exemplo de character entities 



* 

■ $ * * 

. J> I> 





Figura 2.17: Exemplo de character entities 



Exercicios de Fixa^ao 


© Crie um novo documento HTML chamado paragrafos.html no projeto html em Site Root, 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

n 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 


<!DOCTYPE html> 

<htinl lang = "pt-br''> 

<head> 

<meta http-equiv = "Content-Type" content = " test /html ; char set = UTF-B J| > 

<title>Exemplo de paragrafos</title> 

</head> 

<body> 

<h1>Exemplo de paragrafos</hi> 

<p> 

Este paragrafo serve para demonstrar a inser^ao 

automatica das quebras de linha. 

Observe tambem que os espa^os excedentes contidos 

no documento HTML entre as palavras 

desse paragrafo sao desconsiderados 


na exibipao da pagina web. 

As quebras de linha tambem sao 

desconsideradas. 0 navegador ajusta o texto 

desse paragrafo ao espa^o horizontal do 

corpo da pagina, 

</p> 


<p> 


Neste paragrafo mostramos a inser^ao de uma quebra de linha for^ada, 
<br>Percebeu?<br>Alem disso, podemos indicar ao navegador como quebrar 
pa lav ra otorrino<wbr>laringo<wbr>logista otorrino<wbr>laringo<wbr/logista 
otorri no <wbr>laringo<wbr>Iogista otorrino<wbr>laringo<wbr>logista 
otorrino<wbr>laringo<wbr>Iogista otorrino<wbr>laringo<wbr>logista 
otorrino<wbr>laringo<wbr>logista otorrino<wbr>laringo<wbr>logista 
otorrino<wbr>laringo<wbr>logista. 

</p> 

</body> 

</html> 


Codigo HTML 2.24: paragrafos.html 
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HTML 


Al'tfUiVO: https://github.com/K19/K1 9-Exercicio5/archive/k02-html-fixacao10.zip 


© No Windows, utilize o Chrome para acessar o enderego: 


h 11p: //loca 1 host /html/publ i c_htm 1 /paragrafos . h tsnl . 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost/~<U5UARI0>/html/public_html/paragrafos.html. 


© Crie um novo docmnento HTML chamado character-entities*html no projeto html em Site 
Root. 


1 

<!DGCTYPE html> 

2 

<html lang = ' r pt-br"> 

3 

<head> 

4 

<meta http-equiv = J| Content-Type ” content- 1 '’ text/html ; charset = UTF -B J| > 

5 

<title>Exemplo de character entities</title> 

6 

</head> 

7 

<body> 

3 

<hl>Exemplo de character entities</h1> 

9 

<ul> 

10 

<1 i>B(Starf; ftbigstar; S#x02605; &#9733;</li> 

11 

<1 i>Sophone ; &#x0260E; &#9742 ; </li> 

12 

<li>&female ; &#x02640; &A9792;</li> 

13 

<li>S(Sung; Mx0266A; &a9B34; </li> 

14 

</ul> 

15 

</body> 

16 

</html> 


Codigo HTML 2.25: character-entities.htmt 


Arcjllivo: ’’ttps://github.com/K19/K19-Exercicios/archive/k02-html-fixacao12.zip 


© No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/html/public.htnnl/character-entities.html. 


No Uhuntu, utilize o Chrome para acessar o enderego: 


http: //localhost/™<U5UARIG>/html/pijblic_html/character-en.tities , html. 


Texto 


Texto pr£-formatado 

Como vimos, os navegadores desconsideram os espagos excedentes entre as palavras contidas 
em um documento HTML assim como desconsideram as quebras de linha. Contudo, e possivel in- 
serir texto formatado com quantos espagos e quebras de linha desejarmos atraves do elemento pre. 
O texto contldo no conteudo de um elemento pre e exibido com todos os espagos e quebras de linha 
inseridos no documento HTML. Alem disso, os navegadores costumam utilizar fonte mono espagada 
para mostrar esse texto. 
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Assim como os tftulos e os paragrafos, normalmente, os navegadores definein os textos pre- 
formatados como block-level element, Dessa forma, por padrao, eles ocupam todo o espago ho¬ 
rizontal do elemento pai. 

1 

2 

3 

4 

5 

6 

7 

8 
9 

10 
11 
12 

13 

14 

15 

16 

17 

18 

19 

20 


<!DOCTYPE html> 

< h tm 1 lang = ' l 2 3 4 pt-br' l > 

<bead> 

<meta http-equiv = J| Content-Type" content=" text/html ; char set = UTF-8 J| > 

<title>Exemplo de texto pre-formatado</titie> 

</head> 

<body> 

<h1>Exemplo de texto pre-formatado</h1> 

f <pre> 

Os espaijos excedentes sao considerados pelos 

navegadores. Assim como as 

! ' _ _ 1 

quebras 

( □ 

de 


[linha. Observe tambem o tipo de fonte utilizada nesse texto. 

</pre> 

</body> 

</html> 


Codigo HTML 2,26: Exemplo de texto pre-forma tado 


' EjCEiTipk, de texto pre-fc 


-> C 11 liMalhost.«'-kei7o/btml/iHJ : blic_heml/pre-(iiml 

<£l*] 0 # # = 

Exemplo de texto pre-formatado 


fls excEntea aio cona ideradoa peloa 

navegadoraa, Assim coma aa 


U'jebraa 


de 


iinha. Obaeurve tamb&D e- tipo d& foate utilizada neaae texto. 




Figurn 2.13: Exemplo de texto pre-formatado 


C6digo 

Para adicionar codigos em uin documento HTML, devemos utilizar o elemento code. Normal- 
mente, esse elemento e utilizado para definir codigos escritos em alguma linguagem de pi o gram a- 
gao. Normalmente, os navegadores utilizam fonte mono espa^ada para exibir o conteudo desse ele¬ 
ment o. 

Diferentemente dos tftulos, dos paragrafos e dos textos pre-forma tad os, normalmente, os na¬ 
vegadores definem os codigos como inline-level elements. Dessa forma, por padrao, os codigos 
ocupam horizoritalmente somente o espa^o necessario. 

1 <!DOCTYP£ html > 

2 <html lang = ,r pt-br "> 

3 <h=ead> 

4 <meta http-equiv = J| Content-Type" content^" text/html ; charset=UTF-8" > 
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5 <title>Exemplo de codigosc/title> 

6 </head> 

7 <body> 

8 <h 1 >Exeriplo de cod£gos</h1> 

9 <p> 

10 Em Java, utilizamos o codig o [<c ooe>System .out . pr 1 nt 1 n ( " K 1 5 ' ) ; </ code > . 

11 Em C#, utilizamos o codi go [<c oce> System . Console . Wr i teL ine ( " K 1 3" ) ; </ code 

12 </p> 

13 </body> 

14 </html> 


Codigo HTML 227: Exemplo de codigo 


® n EJicmplQ de LCidtqcii > 


C? 1 l«al host/-keizo/html ^pufcllc_litml/code.litml 

* * = 

Exemplo de codigos 


E-m Jnva, utiUzamiM o codigc? System* out ‘“fils'* }■;. Em C#, utilizamoB o r-ddig-o 

System. Consol s iteLlns (" KlS n ) ?. 





Figiira 2.19: Exemplo de codigo 


Elemento i 


A especifica^ao da lingtiagem HTML 5 nao e muito precisa na defini^ao da semantics do eie- 
mento i, Ela indica a utilizagao desse elemento para definir nomes cientlficos, termos tecnicos, ex- 
pressoes idiomaticas em outras linguas, transliterates, pensamentos. Normalmente, os navegado- 
res definem o i como inline-level element e exibem o seu conteudo em italico. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 

14 

15 

16 
17 


<!DOCTYPE html > 

<html lang = "pt-br''> 

<head> 

<meta http - equiv = JI Content - Type 13 content = l< text/html ; charset = UTF-8 J| > 

<title>Exemplo de utilizagao do elemento i</title> 

</head> 

<body> 

<hl>£xentplo de utilizagao do elemento i</hl> 

<ul> 

<1i>Porquinho-da - India ou [<i>Cavia porcellusc/'.^oTi? 

<1 i>[<i>Backup</i3j(copia de seguranga)</li> 

<1 i>[<f>shoot the breeze</i>j(bater papo ou jogar conversa fora)</li> 

< 1 i> [<i>Moskva transliteragao da palavra Moscow em russo)</li> 
<li>f<i>Se nac sabes , aprende; se ja sabes , ensina .</i>] ( Conf ucio } </l i > 
</ul> 

</body> 

</html> 


Codigo HTML 2.28: Exemplo de utilizagao do elemento i 
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@ O O - tKEmpIo de utiliu^iD-dc- X ^ 

4- C U3 iotalhost.;-kei7oylitml/p^tilic_iiriTil/i,1itiNii Q vr 0 = 


Exemplo de ulilizacao do elemento i 

* Porqumliij-da-lndia ou Cavia porceSius 

* Back.up(cAp ia de aeguran^a) 

* shoot the hreezt rfhatcr papa au jagar convcrsa. Fnra) 

* Moj'fci'dCtrarslitcrs^ao <fs pa lavra Moscow cm russo) 

* Stt nao sabes, aprende; se jd sabcs,, ensina. (Confiicio) 


Figum 220: Exemplo de utilizacao do elemento i 


Elemento b 


A especifica^ao da linguagem HTML 5 nao e muito precisa na defini^ao da semantic a do ele¬ 
mento b. Ela indica, por exemplo, a utilizacao desse elemento para definir as palavras chave do re¬ 
sume de um documento e o nome do produto em texto de avaliagao* Normalmente, os navegadores 
definem o b come inline-level element e exibem o conteudo em negrito. 

1 

2 

3 

4 

5 

6 

7 

8 
9 

10 
11 
12 

13 

14 

15 

16 


<!D0CTYPE h t ml> 

<html lang = " pt -br" > 

<head> 

<meta http-equiv = J| Content-Type" content^" text/html ; charset=UTF-B" > 

<title>Exeinplo de utilizacao do elemento b</title> 

</head> 

<body> 

<h 1 >Exentplo de utilizagio do elemento b</hl> 

<P> _ ^ 

Atualmente r praticamente todos os [<b>sistemas corporativos</b>] 
pos suem [<b>interfaces web</b>], Para qu ern deseja atuar no mercado 
de [<b>desenvolvi mento de soft ware </b>], e obri gatorio o conhecimento 
das 1in^uagens: [<b>HTML<7bV| h [<b>css<7b>1 e !<b>JavaScript</b>] , 

</p> 

</body> 

</ html> 


Codigo HTML229: Exemplo de utilizacao do elemento b 


* " " ■ LKEfTipJa dnitiliiatiD-D-. _. 

O LI lQcdha>5f/-keizo/html/fwtolKji^l/b,h^ Q, vf A # = 


Exemplo de utilizacao do elemento b 

AtuaLtncntc. praticamcnte todos os si&temas corpora livui possuem interfaces web. Para quern deseja atuar no mercado 
die desenvolvimento de software, £ obrigatdrio o tonhocinueiito das linguagcns: HTML. CSS e JavaScript. 


Figum 221: Exemplo de utilizacao do elemento b 


44 


www.k19.com.br R <IB 




























45 


HTML 


Texto subscrito ou sobrescrito 


Podemos definir textos subscrito ou sobrescrito com os elementos sub e sup respectivamente. 
Normalmente, os navegadores definem esses elementos como inline-level elements. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 

15 


<!DOCTYPE html> 

<html lang = ' r pt-br' 1 > 

<head> 

<meta http -equiv = ' r Content-Type” content= " text/html ; char set = UTF -B J| > 
<title>Exemplo de texto subscrito ou sobrescrito</title> 

</head> 

<body> 

<hl>Exemplo de texto subscrito ou sobrescrito</ h 1> 

<P> 

A cidade de Sao Paulo possui uma area de 1.523 km [<sup>2</sup>] . 

Em 2011, Sao Paulo emitiu 16,430 milhbes de toneladas de 
C Q f<Tul3>T^7injF>[ . 

</p> 

</body> 

</htmi> 


Cortigo HTML 2.30: Exemplo de texto subscrito ou sobrescrito 


® < 7 I '"7 s LKcmpIn de texto. lubj.. 1 1 K ' \ i 

C 12) local host/™ keizo/ lit m I /pibllcjiim I/s u b-su p. html Civ <1 ^ = 


Exemplo dc texto subscrito ou sobrescrito 

A cidade de S3o Paulo possui uma dt 1.523 km 2 . Em 2011, S5o Petulo emitiu 16^430 milhSes de loiicLadtis de CG?. 


Figura 2.22: Exemplo de texto subscrito on sobrescrito 


Texto importante ou enfatizado 

Podemos definir textos importantes ou enfatizados com os elementos strong e em respectiva- 
mente. Poi padrao, 110s navegadores, o conteudo de urn elemento strong e exibido em negrito e o 
conteudo de um elemento em e exibido em italico. Normalmente, os navegadores definem esses 
elementos como inline-level elements. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 


<!DOCTYPE html> 

<html lang = ' l pt-br' l > 

<head> 

<meta http -equiv=" Content-Type H content^ * text/html ; charset=UTF -B" > 
<title>Exemplo de texto importante ou enfatizado</title> 

</head> 

<body> 

<h1>Exemplo de texto importante ou enfatizado</h1> 

<P> _ _ 

0 [<strong>Brasil</ st rong>| e o unico 
pais que ganhou [<em>cinco vezes</em> 
a [<strong>copa do mundo de f uteboI</strong>j. 

</p> 

</body> 

</ html> 
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Codigo HTML 2.31: Exemplo de texto importante ou enfatizado 



O tKempIn de texto impo:: K 


«* 

4- CL!; local host.,' ^ i^oy Kt m 1 /Enutl ic_Hirm 1 / strong-em.html 

Q* 0 A 

fe * = 


Exemplo de texto importante ou enfatizado 

0 Brasil 6 o tinico pais qtc canhou cinco vezes a Ciipii do mundo d-L futcbuL 




Figura 2.23: Exemplo de texto importante on enfatizado 


Cita^oes 

Podemos definir citagoes longas ou curtas com os elementos blockquote e q respectivamente. 
Par pa dr a o, o elemento blockquote e exibido como elemento de bloco e o elemento q e exibido 
como elemento de linha. Esses dois elementos possuem o atributo cite que deve ser utilizado para 
indicar a fonte da citacao. 

Tambem podemos citar, com o elemento cite, titulos de trabalhos, llvros, musicas, filines, pro- 
gramas de TV, pegas de teatro, entre outros. For padrao, esse elemento e exibido como elemento de 
linha. 

Normalmente, os navegadores definem o blockquote como block-level element. Poroutro lado, 
o q e o cite, normalmente, sao definidos como inline-level elements. 


1 

2 

3 

4 

5 

6 

7 

3 

9 

<!DGCTYPE html> 

<html lang = ,r pt -br' 1 > 

<head> 

<meta http-equiv = ' r Content-Type p content^ 1 ' text/html ; charset = UTF-B J| > 

<title>Exemplo de citagoes</title> 

</head> 

<body> 

<ht>Exemplo de ci tagoes</h1> 

[ <Blbckquote bit#-"http: //en . Wikipedia.org/vriki /Computer" > 

10 

<p> 

11 

A computer is a general purpose device that can be programmed 

12 

to carry out a set of arithmetic or logical operations. Since a 

13 

sequence oT operations can be readily changed f the computer 

14 

can solve more ’than one kincTlrf problem, 

15 

f < /p > i 

16 

1 1 

17 

<p> 

13 

Conventionally, a computer consists of at least one processing 

19 

element h typically a central processing unit (CPU) and some form 


20 

of memory. The processing element carries out arithmetic and 

21 

logic operations, and a sequencing and control unit that can 

22 

change the order of operations based on stored information. 

23 

Peripheral devices allow information to be retrieved from an 

24 

external source f and the result oT operations saved and retrieved. 

25 

( </p> J 

26 

f </ blockquote> 

27 
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23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 



Codigo HTML 2.32: Exemplo de cita^des 


^ - - tuempia de ntaqDEi _ 

<- O 12 lMalh&st/-keijQ/litin1/pub<itJitml J i'blM^q'UQte^q--t«a^tml = 


Exemplo dc eita^ocs 

A computer is a general purpose device that can be programmed to carry out a set of arithmetic or Logical 
operations. Since a sequence of operations can be readily changed, the computer can solve more than one 
Lind of problem. 

Conventionally „ a computer consists of at least one processing element, typically a central processing unit 
(CPU) and some Form of memory. The processing element carries out arithmetic and logic operations, and a 
sequencing and control unit that can change the order of operation!; based on stored information. Peripheral 
devices allow information to be retrieved from an external source, and the result of operations saved and 
retrieved. 

Nelson Rodrigues disse: ’ O adnllo n 3n caiste. O hotnem £ uni menino perene \ 

A pc^a A mutter sem pecado de Nelson Rodrigues estreiou cm 1941 no Rio de Janeiro, 


Figum 2.24: Exemplo de citaqoes 


Abrevia^oes 


Podemos definir abreviagoes com o eiemento abbr. Por padrao, esse elemento e exibido como 
eiemento de linha. O atributo title desse eiemento e utilizado para definir um tootip. Normalmente, 
os navegadores definem esse eiemento como inline-level element 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 


<!DOCTYPE html > 

<html lang = jr pt -br ,r > 

<head> 

<meta http-equiv = ' r Content-Type" content^ H test/html ; charset=UTF-8" > 

<title>Exemplo de abreviatoes</1itle> 

<f head> 

<body> 

<h1>Exemplo de abreviagoes</h1> 

<P> _ 

0 [<abbr title = r 'Institute? de Matematica e Estat i st i ca ri >IME</abbr >| e 
uma das urcidades da f<abbr t i t le = '' Un i ve rs 1 jade de Sao Pan Lo ' >USF </ abbr >\ _ 

</p> 

</body> 

</html> 


Codigo HTML 2.33: Exemplo de abreviacoes 
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^ Eke mpla dt abrcviivjjci 


<- CL local host/^kelzoy htm 1 fpiubJiEj'iti7i 1 /abbr.hlml 

<a*i# * s 

Exemplo de abrevia^oes 


0 IME & uma das umdades da USP. 




Figura 225: Exemplo de abreina^des 


Defmigoes 


Podemos inserir definigoes em um documento HTML com o elemento dfn. Por padrao, esse 
elemento e exibido como elemento de linha. Normalmente, os navegadores definem o dfn como 

inline-level element 


1 

2 

3 

4 

5 

6 
7 
B 
3 

10 

11 

12 

13 

14 

15 


<!DOCTYPE html> 

< h t m 1 lang=" pt -br " > 

<head> 

<meta http-equiv-" Content-Type" content-” text/html ; charset=UTF -8" > 

<title>Exemplo de definicoesc/title> 

</head> 

<body> 

<h1>Exemplo de definigdes </ h 1> 

<P> 

Um [<dTn > p l ngado < 7TT h'>] e urn copo d e cafe com um pouco de leite.<br> 

Uma [<dfn> bomba de chocolate </df n 5\ e um doce de padaria feito com 
massa de farinha de trigo com recheio cremoso e cobertura de chocolate, 
</p> 

</body> 

</html> 


Codigo HTML 2.34: Exemplo de defimcdes 


^ ^ ' " Eke mplc de dEhniq-MS 

Oil local host.II/dffi.html 


Exemplo de definifoes 

Um pingado d um copo de caft com um pouco de leitc. 

Uma bomba de chocolate £ urn docc de padaria feito com massa dc farinha de Lrig.o com rccheio cremoso c cobertura de. 
chocolate. 


Qfti » ♦ ♦ = 


Figura 226: Exemplo de defini^oes 
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HTML 


Altera^oes 

Em alguns cases, e importante informar que o texto de um documento HTML sofreu altera^oes. 
Um texto que foi acrescentado em um documento HTML deve ser definido com o elemento ins. 
Um texto que nao faz rnais parte do documento deve ser definido com o elemento del. Um texto 
que deixou de ser correto, preciso ou relevante deve ser definido com o elemento s. For padrao, 
esses el e men to s sao exibidos como elementos de linha. Normalmente, os navegadores definem esses 
elementos como inline-level elements. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 


<!DOCTYPE html> 

<html lanE = "pt-br'‘> 

<head> 

cmeta http-equiv^ 1 Content-Type" content^ 1 ’ test/html ; charset=UTF-B" > 
<title>Exemplo de alteragoes</title> 

</head> 

<body> 

<h1>Exemplo de alteragdesc/h1> 

<P> __ 

Natal e a capital do Rio Grande do Norte. (<ins>Sua fundagao foi] 

[em 25 de dezernbro de 1 599 . </ i ns >] |<del >A area total dessa cidade e! 

[1 67.263 knt< sup>2</ sup ></ del > . <s>De a cor do com o IBGE a pop ul agio] 

(dessa cidade e de 774.230 habitantes.</s>JDe acordo com o IBGE a 
populagao dessa cidade 4 de 303.739 habitantes. 

</p> 

</body> 

</html> 


Codigo HTML 235: Exempto de altemcoes 


S' O 'O - Ck E mpla de alterapoe, X '• _ ^ 

CL!) local host/- keizo/h’tmi/jMJi1)c_litni I / lns-del-s.htm) 


* = 


Exemplo de alteragoes 

Kafai d a capitaL do Rio Grande do Norte. £mtu adagjjiCiloi£I]; l 2. A-area tored-deiaa-cidfide-j 
] 6 7,2 6 3 km ~. De aco r do ciitd a I BGE. a populagSto dL -Hs i i c i dade <1 de 774.230 hab i tantii H . De acordo com a IBGE a 
populagao dessa cidade t dc 803,739 habitantes. 


Figura 2.27: Exemplo de akevagdes 


Os elementos ins e del possuem os atributos cite e datetime. O atributo cite deve ser utilizado 
para indicar a URL de um documento com as justificativas da altera^ao. O atributo datetime deve 
ser utilizado para informar quando ocorreu a altera^ao. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 


<!DOCTYPE html > 

<html lang = ,r pt -br"> 

<head> 

cmeta http-equiv = JI Content-Type" content^ 1 ' test/html ; char set = UTF-B J| > 
<title>Exemplo de alteragoes<7title> 

<7 head> 

<body> 

<hl >Exemplo de alteragoes<7 hi > 

<P> 

Natal e a capital do Rio Grande do Norte. < ins [ci te= n ins - ex plica cao . html " 
[datet ime = ir 20 1 3 - 1 0 - ' 5T 22 ; 55 : 0 3 Z "] >Sua fundagao foi em 25 de dezernbro de 
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12 1 599. </ in5> <del [c i t e = '' del-explicacao . h t m _ 'date t i me - Ir 20-13-10-10 T1 7 : 43 : 0 7 Z f '] > A 

13 area total dessa cidade e 167,263 km<sup>2</sup></del>. <s>De acordo com o 

14 IBGE f a populagao dessa cidade e de 774,230 habitantes.</s> De acordo com o 

15 IBGE a populate dessa cidade e de £03.739' habitantes, 

16 </p> 

17 </body> 

18 </html> 


Codigo HTML 2.36: Exemplo de aheracoes 


Data e hora 


O elemento time permite que datas e horarios sejam defmidos em um documento HTML. Ha 
duas formas de utilizar esse elemento. A primeira e definir a data e o horario desejado no con- 
teiido do elemento time. A segunda e definir a data e o horario desejado no valor do atributo date¬ 
time. Nessas duas opgoes, as datas e os horarios devem ser escritos seguindo o formato definido na 
especificagao da linguagemHTML (http://www.w3. org/TR/html5/text-level-semantics . html# 
the-time-element). Quando utilizamoso atributo datetime, o conteiido do elemento timenao pre¬ 
cis a seguir um formato especifico. Normalmente, os navegadores definem o time como inline-level 
element. 


1 

<!DGCT7PE html> 


2 

chtml lang="pt-br"> 


3 

<head> 


4 

<meta http-equiv=" Content-Type w content = l? text/html ; charset=UTF-S JI > 

5 

<title>Exemplo de datas e horas</title> 

6 

</head> 


7 

<body> 


8 

<hl>Exemplo de datas e horas</h1> 


9 

<ul> 


10 

< 1 i >f<tTme >20 1 0-08 < /time %/ 1 i > 


11 

<1 i>[< t iroe>1 9 8 4-1 0-30</ timeSf</li > 


12 

< 1 i>[< time>1 2-25</time / 1 i > 


13 

< 1 i >[< 1 1 me >09 : 00</ 1 1 rue >j</1 i > 


14 

< 1 i >[<tlme> 2013-f 2 -25 2 3:59 </ time > 

</li > 

15 

< 1 i >[< 1 1 me dat.e t i me = ,r 201 0 -08 ,r >Fu nd 

a^ao da K1~9<7time>]</1.i> 

16 

<li>[<time datetime = '' 1 98 4- 1 0-30 fl >Aniversar io do Rafael </ time li> 

17 

< 1 i>[< time datet.ime = lr 1 2 - 25 lr >Natal</ tiine^</li > 

IS 

<li>[<time dat et i , ne = ,r 09: 00 ,r >Horario de Ent rad a </t ime ^</ li > 

19 

< 1 i>f< t ime dat et ime = " 201 3 - I 2-31 23 

: 59 : 5 9 ">Ano Novo 20 14</ time>f</li > 

20 

</ul> 


21 

</body> 


22 

</html> 



Codigo HTML 2.37: Exemplo de datas e koras 


50 


www.k19.com.br ■ KIS 




























51 


HTML 



FSgum 2.28: Exemplo de datas e horns 


Texto marcado 

O element© mark permite que determinados trechos de um texto sejarn marcados. Normal- 
mente, os nave gad ores define rn o mark com o inline-level element. 

1 

2 

3 

4 

5 

6 

7 

8 
9 

10 
11 
12 

13 

14 

Codigo HTML 2.38: Exemplo de texto marcado 


£.Kempla dr tEHia marcadD 

C \L localhost, , -<fe!3<?/html/pu : b1k_fimil/mark.htiml 

Exemplo de texto marcado 

Java c Ctf slo linguag&ns de programme. oncniadas a objcto. 


# = 


<!DOCTYPE html> 

<h trail lang=" pt-br" > 

<h>ead> 

<meta http-equiv = J| Content-Type" content^" text/html ; charset=UTF-8" > 
<title>Exemplo de texto marcado</1itle> 

</head> 

<body> 

<hl>Exemplo de texto marcado</hl> 

<P > __ ^ 

! <mark>Java</ntark>] e ;<mark>C#</inark>] sao linguagens de prograraia^ao 
<mark>orientadas a objeto</ mark >]. 

</p> 

</body> 

</html> 


Figurn 2.29: Exemplo de rexto marcado 
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Exercicios de Flxa^ao 


0 Crie uni novo documento HTML chamado texto-pre-formatado.html no projeto html em Site 
Root. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 


<!DGCTYPE html> 

< ht m 1 lang=" pt-br' 1 > 

<head> 

<meta http-equiv = : " Content-Type 0 content=" text/html ; charset=UTF -B" > 
<title>Exemplo de texto pre-formatado</1itle> 

</head> 

<body> 

<h1>Exemplo de texto pre-formatadoc/hl> 

<pre> 

Os espagos excedentes sao considerados pelos 

navegadores. Assim como as 

quebras 

de 

linha. Observe tambent o tipo de fonts utilizada nesse texto. 

</pre> 

</body> 

</htmI> 



Codigo HTML 2.39: texto pre- formatodo. htm / 


ArCflliUO ; https: //github, con/K19/M9-ExercicLos/archive/k02-htrnl-fixacao14.zip 




No Windows, utilize o Chrome para acessar o endere^o: 


http: / /localhost/html/public_htinl/textQ-pre-format ado. html. 


No UbuntUp utilize o Chrome para acessar o endereco: 


h t tp://loca1 host / ~< USU AR IO> / h t ml /pub 1 i c_htn 1/ tex to- pre - forma t ado .html. 


© Crie um novo documento HTML chamado codigo.html no projeto html em Site Root, 


1 <!DQCTYPE html> 

2 < lit ml lang = ' r pt-br "> 

3 <head> 

4 <meta http-equiv = JI Content-Type " content-" text/html ; charset=UTF-B" > 

5 <title>Exemplo de codigos </ title> 

6 </head> 

7 <body> 

8 <hl>Exemplo de cddigos</h1> 

9 <p> 

10 Em Java, utilizamos o codigo <code>Sy stem. out. println ( "K19 ") ; </code> 

11 Em C#, utilizamos o codigo <code>System. Console . Wri teLine C " K19 code> 

12 </p> 

13 </body> 

14 </htmI> 


Codigo HTML 2.40 ; codigo.html 
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Al'CJUiVO: https: //github.com/KIS-/K19-Exercicios/archive/k02-html-fixacaol6.zip 


© 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/htnil/public.htrnl/codigo.html. 

No XJbuntu, utilize o Chrome para acessar o endere^o: 


http: //Localhost/xU5UARIO>/html/public_html/codigo. html. 


© Crie um novo documento HTML chamado i.html no projeto html em Site Root, 


1 <!DOCTYPE html > 

2 <htm 1 lang=" pt-br'■ > 

3 <head> 

4 <meta http-equiv = ' r Content-Type n content- 1 ’ 1 text/html ; charset = UTF -8 J| > 

5 <title>Exemplo de utilizagao do elemento i</title> 

6 </head> 

7 <body> 

S <hl>Exemplo de utilizagao do elemento i</hl> 

9 <ul> 

10 <1i>Porquinho -da -India ou <i>Cavia porcellus</ix/li> 

11 <lixi>Backup</i>{copia de seguranga}</li> 

12 <li><i>shoot the breeze</i>(hater papo ou jogar converse fora)</li> 

13 <lixi>Moskva</i>Ctransliteragao da palavra Moscou em russo)</li> 

14 <lixi>3e nao sabes , aprende; se ja sabes, ensina.</i> C^onfucio}<71 i> 

15 </ul> 

16 </body> 

17 </html> 


CodigoHTML 2.41: i.html 


Arquiuo: https: //github.com/K 1 9/K19-Exercicios/archive/k02-html-fixacaol8.zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/publicjitml/i.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost/xuSUARI(»/html/public_html/i. html. 


@ Crie um novo documento HTML chamado b.html no projeto html em Site Root. 


1 <!DOCIfPE html> 

2 <html lang = ' r pt-br ,l > 

3 <head> 

4 <meta http -equiv- ,r Content-Type" content^ 11 text/html ; charset=UTF-8 11 > 

5 <title>Exemplo de utilizagao do elemento b</title> 

6 </head> 

7 <bcdy> 

3 <hl>Exemplo de utilizagao do elemento b</hl> 

9 <p> 

10 Atualmente r praticamente todos os <b>sistemas corporativos</b> 

11 possuem <b>interfaces web</b>. Para quern deseja atuar no mercado 

12 de <b>desenvolvimento de software</b>, e obrigatbrio o conhecimento 

13 das linguagens: <b>HTML</b>, <b>CSS</b> e <b>JavaScript </b>. 

14 </p> 
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15 </body> 

16 </html> 


Codigo HTML 2.42: bJit ml 


Aiquiuo: nttps:/7gLthub.com/K19/K19-ExercicLO5/archive/k02-html-fixacao20.zip 


O No Windows, utilize o Chrome para acessar o endere^o: 


http: //lQcalhost/htrnl/public_htnnl/b. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


h11p://loca 1 host USUAR IO> /htm1/ pub1 ic_htffi 1/b.html . 


@ Crie um novo documento HTML chamado texto-subscrito-sobrescrito.html no projeto html 
em Site Root. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 


<!DOCTVPE html> 

<html lang = ' r pt-br' r > 

<head> 

<meta http-equiv = JI Content-Type" content^ H text/html ; charset=UTF-8" > 
<title>Exemplo de texto subscrito ou sobrescrito</title> 

</ head> 

<body> 

<hl>Exemplo de texto subscrito ou sobrescritoc/hT > 

<p> 

A cidade de Sao Paulo possui uma area de 1.523 km<sup>2<7sup>. 

Em 2011, Sao Paulo emitiu 16,430 milhdes de toneladas de 

C0<sub>2</sub>. 

</p> 

</body> 

</html > 


Codigo HTML 2.43: texto-subscrito-sohrescri to. h tmi 


Arquivo: https://git-hubcom/K19/K19-ExercicLO5/archive/k02-html-fixacao22.zip 


@ No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/html/public_html/texto-subscrito-sobrescrito,html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<U5UARIG>/html/public_htmI/texto-subscrito-sobrescrito.html. 


© Crie um novo documento HTML chamado texto-importante-enfatizado.html no projeto html 
em Site Root. 


1 <!DOCTYPE html > 

2 <html lang = ,r pt-br"> 

3 <head> 

4 <meta http-equiv = ,r Content-Type r content = IJ text /html ; char set = UTF-B JI > 

5 <title>Exemplo de texto importante ou enfatizado</title> 

6 </head> 

7 <body> 

3 <hl>Exemplo de texto importante ou enfatizado</h1> 
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9 

10 

11 

12 

13 

14 

15 


<p> 

0 <strong>Brasi!</strong> e o unico 
pais que ganhou <em>cinco vezes</ein> 
a <strong>copa do mundo de futebol</strong> . 
</p> 

</body> 

</html> 


Codigo HTML 2.44: texto-importante-enfatuadahtmi 


AyquiVO: rttps://gitnub. com/K ’ 9/K19-Exercicios/archive/k02-html-fixacao24.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 

http: //localhost/html/public_html/texto- importante-enfatizado. html. 

No Ubuntu, utilize o Chrome para acessar o enderego: 

http://Localhost/-< U5U AR IO>/html/pub1 i c_html/texto-import ante-enfatizado.h tml . 

@ Crie urn novo documento HTML chamado citacoes.html no projeto html em Site Root. 


1 

< ! DGCTfPE html > 

2 

<html lang = ' r pt-br"> 

3 

<head> 

4 

<meta http-equiv=" Content-Type" content^" text/html ; charset=UTF-B J| > 

5 

<title>Exemplo de citagoes</title> 

6 

</head> 

7 

<body> 

3 

<hl>Exemplo de cita£des</h1> 

9 

< block quote cite="http://en. wikipedia .org/wiki/ Computer" > 

10 

<p> 

11 

A computer is a general purpose device that can be programmed 

12 

to carry out a set of arithmetic or logical operations. Since a 

13 

sequence of operations can be readily changed, the computer 

14 

can solve more than one kind of problem. 

15 

16 

17 

</p> 

<p> 

13 

Conventionally,, a computer consists of at least one processing 

19 

element, typically a central processing unit (CPU) and some form 

20 

of memory. The processing element carries out arithmetic and 

21 

logic operations, and a sequencing and control unit that can 

22 

change the order of operations based on stored information. 

23 

Peripheral devices allow information to be retrieved from an 

24 

external source, and the result of operations saved and retrieved. 

25 

</p> 

26 

27 

</blockquote> 

23 

<p> 

29 

Nelson Rodrigues disse: 

30 

<q ci te = ri http : / / pt .wikipedia, org/wi ki /Nelson_Rodri gues ™> 

31 

0 adulto nao existe. 0 homem e urn menino perene 

32 

</q>. 

33 

34 

</p> 

35 

<P> 

36 

A pe^a <cite>A mulher sem pecado</cite> de Nelson Rodrigues estreou 

37 

em 1941 no Rio de Janeiro. 

33 

</p> 

39 

</body> 

40 

</html> 


Codigo HTML 2.45 ; citacoes.html 
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Arcjliivo: https://github.com/KtS/Kl9-EKercicios/archive/k02-html-fixacao26,zip 


0 No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/html/public.html/citacoes.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //loca 1 host/~<USUARI(WhtM/public_htflil/ci tacoes.html. 


© Crie um novo documento HTML chaniado abreviacoes.html no projeto html em Site Root. 


1 <!DOCTVPE html > 

2 <htm 1 lang=" pt -br'■ > 

3 <head> 

4 <meta http-equiv = ,r Con tent-Type n content- 1 ' text /html ; char set = UTF-8 J| > 

5 <title>Exemplo de abrevia^oes</title> 

6 </head> 

7 <body> 

8 <hl>Exemplo de abreviagoesc/hl > 

3 <p> 

10 0 <abbr tit.le = " Institute de Matematica e Estatistica ">IME</abbr> e 

11 uma das unidades da <abbr title = "Universidade de Sao Paulo ">115 P</abb r>. 

12 </p> 

13 </body> 

14 </html> 


Cadi go HTML 2.46: abreviacoes.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao28.zip 


No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/html/public_html/abreviacoes. html. 

No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/html/public_html/abreviacoes.html. 


0 Crie um novo documento HTML chamado definicoes.html no projeto html em Site Root. 


1 

<!DOCTYPE html> 

2 

< h t m 1 lang = !r pt -br pl > 

3 

<head> 

4 

<meta http-equiv-' 1 Content-Type " content-" text / html ; charset = UTF -8 " > 

5 

<title>Exemplo de definigoes</title> 

6 

</head> 

7 

<body> 

3 

<h1>Exemplo de definigoesc/hl> 

9 

<p> 

10 

Um <dfn>pingado</dfn> e um copo de cafe com um pouco de leite.<br> 

11 

Uma <dfn>bomba de chocolate</dfn> e um doce de padaria feito com 

12 

massa de farinha de trigo com recheio cremoso e cobertura de chocolate. 

13 

</p> 

14 

</body> 

15 

</html> 


Codigo HTML 2.4 7: depmeoes, html 
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Ai'CJUiVO: https://github.com/KtS/Kl9-EKereicLO5/archive/k02-html-fixacao30.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http: //local host/html/puiblic.html/definicoes. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/html/public_html/definicoes . html. 


@ Crie um novo documento HTML chamado alteracoes.html no projeto htrnl em Site Root. 


1 <!DOCTYPE html > 

2 <html lang=" pt -br'■ > 

3 <head> 

4 <meta http-equiv = ' r Content-Type ” content- 1 ' text/html ; char set = UTF-8 J| > 

5 <title>Exemplo de alteragoes</title> 

6 </head> 

7 <body> 

8 <hI>Exemplo de alteragoes</h1> 

9 <p> 

10 Natal e a capital do Rio Grande do Norte, <ins>Sua fundagao foi 

11 em 25 de dezembro de 1599.</ins> <del>A area total dessa cidade e 

12 157,263 km<sup>2</sup></del>. <s>De acordo com o IBGE, a populagao 

13 dessa cidade e de 774.230 habitantes.</s> De acordo coin o IBGE a 

14 populagao dessa cidade e de 303.739 habitantes. 

15 </p> 

16 </body> 

17 </html> 


Codigo HTML2.48 ; alteracoes.html 


Aycflliuo: nttps://github.com/KI 97K19-ExercLCLos/archive/k02-html-fixacao32.zip 


© 


No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/html/publicjitml/alteracoes. html. 


No Ifbuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARia>/html/publlc_htffll/alter acoes.html. 


© Crie um novo documento HTML chamado data-hora.html no projeto html em Site Root. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 


<!DGCTYPE html> 

<html lang = ' r pt-br"> 

<head> 

<meta http-equiv = J| Content-Type " content^ " text/html ; charset=UTF-8" > 
<title>Exemplo de datas e horas</title> 

</head> 

<body> 

<hl>Exemplo de datas e horas</h1> 

<ul> 

<11 >< time >2010-0S</1ime></li > 

<11 ><time>1 98 4-1 0 -30</ timex / 11 > 

<lixt ime>1 2-25</t imex/li > 

< 1 i >< t i me > 0 9 : 00 </1 i me >< /1 i > 

<11Xtime>2013-12-25 23:59</time></li> 
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15 

16 
17 
IS 

19 

20 
21 
22 


clixtime datet ime^ 1 201 0-08" >Fundagao da K19</time></li> 
clixtime datet iine = <r 1 984-1 0-30 IJ >Aniversario do Rafael</1ime></li> 
clixtime datet i me = ir 1 2-25 31 >Natal</timex/li> 
clixtime datet ime = ' r 09 : 00" >Horario de Entrada</timex/li> 

Clixtime datet ime = " 201 3 -1 2-8 1 23 : 59 : 59 " > Arid Novo 2014</time></li> 
</ul> 
c/body> 

</h tml> 


Cddigo HTML2.49: data-hora.html 


Arqutvo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao]]4. zip 


@ No Windows., utilize o Chrome para acessar o endere^o: 


http://localhost/html/pubiic_html/data-hora.html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


h 11 p://loca 1 h ost/ ~c U5UARI0>/ h t m 1 /p ub 1 i c_ht ml /da t a-hor a.ht ml . 


© Crie um novo document© HTML chamado mark*html no projeto html em Site Root. 


1 < ! DQCTYPE html > 

2 chtml lang = ' , pt-bT' l > 

3 chead> 

4 <meta ht tp-equiv = J| Content-Type" content^” text/html ; charset=UTF-8" > 

5 <title>Exemplo de texto marcado</title> 

6 </head> 

7 <body> 

S <h1>Exemplo de texto marcadoc/hl> 

9 Cp> 

10 <mark>Java</mark> e <mark>C#</mark> sao linguagens de programagao 

11 <mark>orientadas a objeto</mark>. 

12 </p> 

13 c/body> 

14 </html> 


Cod igo HTML 2.50: mart html 


Arqitiuo: https://github, com/K19/K19-Exercicios/archive/k02-html-fixacao36,zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http: }i localhost/html/publ icjvtml/mark.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //local host /™<USUARIO>/htinl/public_ht ml/mark. html. 


Listas 


A linguagem HTML define tres tipos distintos de listas. 
* Lista de describes 
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* Lista com ordem 

* Lista sem ordem 


Lista de describes 


Para criar uma lista de describes, devemos utilizar o element o dl Ess as lista s sao formadas 
por termos ou nomes e as suas respectivas describes. Os termos ou nomes sao definidos com o 
elemento dt. As describes sao definidas com o elemento dd. Norinalmente, os navegadores definem 
tod os esses element os como block-level elements. 


1 

<!DOCTfPE h t m1> 

2 

< h tm 1 lang=" pt-br" > 

3 

<head> 

4 

<meta http-equiv = ' r Content-Type |J content-" text/htinl ; char set = UTF -8 11 > 

5 

<title>Exemplo de lista de descrigbes</title> 

6 

</head> 

7 

<body> 

8 

<h1>Exemplo de lista de descrigoes</h1> 

9 

[ <dT> 

10 

<dt>KQ1 - Logica de Programagao</dt> 

11 

<cd> 

12 

Conhecimentos em Logica de Programagao e o pre-requisite fundamental 

13 

para que uma pessoa eonsiga aprender qualquer Linguagem de Programagao... 

14 

f </dd> 

15 

<dt >K.Q2 - Desen volvimento Web com HTML , CSS e JavaSc r ipt </ dt> 

16 

f <dd> \ 

17 

Atualmente , praticatnente todos os sistemas corporativos possuem 

18 

interfaces web. Para quern deseja atuar no mercado de desenvolvimento . . . 

19 

</dd> 

20 

<dt>K03 - SQL e Modelo Relaciorcal </dt> 

21 

<dd> 

22 

Como as aplicagbes corporativas necessitam armazenar dados e fundamental 

23 

que os desenvolvedores possuam conhecimentos sobre persistencia de dados. 

24 

</dd> 

25 

[ </dl> 

26 

</body> 

27 

</h tml> 


Codigo HTML 2.51: Exempto de lista de describes 


n 0 Die mplo deli Jtadedeio x . 


/ , 

<- C il loedhosty-'ke^htmbpijbJiOtml/dl-dt-dd.htsiTiJ 


= 



Exemplo de lista de describes 


KOI - Logics dc Programme 

Conhccimentos cm Ldgica dc Programfl^ao d o- prfi-rcquisifo fundamental para quc uma pessoa consiga aprcnder 
qualquer Linguagcm dc Progracna^Jn.... 

K02 - DcRcm'olvimento Web com HTML, CSS c JavaScript 

Atualmentc, praticamentc (odos os sistemas corporativos possucm interfaces web. Para quern deseja atuar no 
mere ad o de dcscnvolvimento... 

KG3 - SQL e Modclo Rclacional 

Como as aplica^des corporal! vas ucce-ssttam armujccnar dados c fundamental quc os dcsenvolvcdorcs possuam 
conhcci memos sobre persistence dc dados. 


FigLira 2.30: Exemplo de lista de describes 
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Lista com ordem 

Para criar urna lista com ordem, devemos utilizar o elemento oL Os itens de uma lista com or- 
dem sao definidos com o elemento li. Normalmente, os navegadores definemtodos esses eiementos 
co mo block-level elements. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 
19 


<!DOCTYPE html> 

<htm 1 lang- ir pt -br' r > 

<head> 

<meta http -equiv = ,r Content-Type 1 2 3 4 5 6 7 * 9 * content-" text/html ; charset=UTF -8" > 
<title>Exemplo de lista com ordemc/title> 

</head> 

<body> 

<hl>Nacarrao instantaneo - K19 Receitas</h1> 

<h2>Nodo de preparo</h2> 

| <of> 

f_ <li> Fervor 6 00 Til de agua era uma pane la . <71 i> _ 

f_ <li>Retirar o macarrao do pacote,</ li > _ 

[ <li>Colocar o macarTio na panela no fogo baixo.</li> 

[ <li>Cozinhar o macarrao por 3rain,</li> 

<1i >Temperar a g osto,</ 1i > 

f </ol> 

</body> 

</html> 


Codigo HTML 2.52: Exemplo de lista coni ordem 


^ ^7 O £j(e mpJa dt li sta. com or 


<- O It locilhost/- ke \zof hrm|/publjc_htm1 yd-l i, html 

Q-V # ♦ • S 

Macarrao instantaneo - K19 Receitas 


Modo de preparu 


t. Fcrvcr 600ml dc agua cm vmn panda, 

2. Retirar o macarrao do pacotc. 

3. CoLocar o macarrftn m panela no fogo baiio. 

A. Cozinhar d macarrao pnr 3min. 

5, Tcmpcrar a gosto. 



Figura 2.31: Exemplo de lista com ordem 


Lista sem ordem 

Para criar uma lista sem orderru devemos utilizar o elemento ul. Os itens de uma lista sem or¬ 
dem sao definidos com o elemento li. Normalmente, os navegadores definemtodos esses eiementos 

co mo block-level elements, 

1 <!DOCTYPE html> 

2 <htral lang = "pt-br' 1 > 

3 <head> 

4 <meta http-equiv^ 1 Content-Type" content^" text/html ; charset=UTF-8" > 

5 <title>Exemplo de lista sem ordem</title> 

6 </head> 

7 <body> 

3 <hT>K02 - Desenvalvimento Web com HTML, CSS e JavaScript</h1> 

9 <h2>Pre-requisitos</h2> 
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Codigo HTML 2.53: Exemplo de lista sem ordem 


0 C 1 'O ■ EicEjnpJn dr li'sEa s*m arc- _ 

C L. local host/ \zot btm I /publicjitm l/ul-lk html Q, {I ♦ = 

K02 - Dcsenvolvimcnto Web com HTML, CSS e 
JavaScript 

Pre-requisites 

* Conhccitncnto tic algum sistcma opcracional (Windows/Linux/MatOS X) 

* Ldgica dc programacao 


Figurn 2.32: Exemplo de lista sem ordem 


Listas aninhadas 

Uma lista pode ser definida dentro de outra lista. Quando listas sera ordem sao aninhadas, nor¬ 
mal mente, os navegadores alternam o marc ad ores dos itens. 


1 

2 

3 

4 

5 

6 

7 

3 

9 

<!DQCTYPE html> 

<fttinl lang = ,r pt-br "> 

<head> 

<meta http-equiv=" Content-Type" content^ 1 ' test/html ; charset=UTF -S’" > 

<title>Exemplo de listas aninhadas</title> 

</head> 

<body> 

<hl>Exemplo de listas aninhadas<7hi> 

<h2>Continentes</h2> 

10 

[ <ul> 

11 

l <TT> — 

12 

Europa 

13 

1 <ul> 

14 

\ <1i >Portugual</ 1 i > 

15 

f <li>Franga</li> 

16 

<1i>Alemanha</li> 

17 

[ <7UT> ) 

13 

</li> 

19 

f <li> 


20 

f Asia 

21 

i <Ljl> i 

22 

<1i> Japao</ li > 

23 

<TT>cTii n a < / 1 i > 

24 

<1i >India</ li > 

25 

f </ul> 


26 

f </li> : 

27 

( < / y 1 > 

23 

<h2>Cronograma da ntinha viagem</h2> 

29 

[ <oi> 

. 

30 

[ : 

31 

Europa 
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Cortigo HTML 2.54: Exemplo de listas aninhadas 


® ^ ^ Diemplo de liitas aninhj-L x ^ 

Cl local ho-st., 1 2 3 —^ e i j: n>y ht m I ^ I / Ii%t5.s-^n i n b^dii s. html 




Exemplo de listas aninhadas 

Continentes 


Europa 

* Poctugual 
o Fran^n 
o Altmflnhfl 
Asia 

o Japan 
o China 
o India 


Cronograma da minha viageio 


t. Eumpa 

1. Pbrtugual 

2. Franca 

3. Aliimartha 
2. Asia 

1. Japan 

2. China 

3. India 


Figum 2.33: Exemplo de lista aninhadas 



Exercicios de Fixa^ao 


@ Crie uin novo documento HTML chamado lista-descricoes.html no projeto html em Site Root. 


1 <!DOCTYPE html> 

2 <html lang = Jr pt - br " > 

3 <head> 
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HTML 


4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 


<meta http-equiv=" Content-Type" content^" text/html; charset=UTF-8" > 

<title>Exemplo de lista de descrigoes</1itle> 

</head> 

<body> 

<hl>£xemplo de lista de descrigoes</h1> 

<dl> 

<dt>K0T - Logica de Programagao</dt> 

<dd> 

Conhecimentos era Logica de Programagao e o pre-requisito fundamental 
para que urna pessoa consiga aprender qualquer Linguagem de Programagao . ., 
</dd> 

<dt>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</dt> 

<dd> 

Atualmente, praticamente todos os sistemas corporativos possuem 
interfaces web. Para quern deseja atuar no mercado de desenvolvimento... 
</dd> 

<dt>K03 - SQL e Modelo Relacional</dt> 

<dd> 

Como as aplicagoes corporativas necessitam armazenar dados e fundamental 
que os desenvolvedores possuam conhecimentos sobre persistencia de dados. 
</dd> 

</dl> 

</body> 

</html> 


Cddigo HTML 2.55 ; lista-descricoes.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao33. zip 


@ No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/htuil/public_htral/lista-descricoes. html. 

No Ubuiitu, utilize o Chrome para acessar o enderego: 


http://localhost/~<USUARIO>/html/public_html/lista-descricoes.html. 


@ Crie um novo documento HTML chamado lista-com-ordem, html no projeto html em Site Root. 


<!DGCTFPE html> 

<html lang=" pt-br' 1 > 

<head> 

<meta http-equiv=" Content-Type u content^" text/html ; charset = UTF -8" > 
<title>Exemplo de lista com ordem</title> 

</head> 

<body> 

<hT>Macarrao instantaneo - K19 Receitas</hi> 

<h2>Modo de preparo</h2> 

<ol> 

<li>Ferver 600ml de agua em uma panela.</li> 

<li>Retirar o macarrao do pacote.</li> 

<li>Colocar o macarrao na panela no fogo baixo.</li> 

<li>Cozinhar o macarrao por 3min.</li> 

<li>Temperar a gosto.</li> 

</ol> 

</body> 

</html> 


Cddigo HTML 2.56: lista-com-ordem. htm / 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao40.zip 
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© No Windows, utilize o Chrome para acessar o enderego: 


h t1 p://loca1host/ html /publ ic_htm 1/lista-com-o rdero.h t ml . 

No Ubuiitu, utilize o Chrome para acessar o enderego: 


http: //localhost/™<USUARIO>/htinl/public_htinl/lista- com-ordem.html. 


@ Crie urn novo documento HTML chamado !ista-sem-ordem*htmJ no projeto html em Site Root. 


1 <!DOCTYFE html> 

2 <htm 1 lang = "pt-br'■ > 

3 <head> 

4 <meta http-equiv=" Content-Type" content^" text/html ; charset=UTF-B" > 

5 <title>Exemplo de lista sen ordem</title> 

6 </head> 

7 <body> 

8 <h1>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</h1> 

9 <h2>Pre-requisitos</h2> 

10 

11 <ul> 

12 <1i>Conhecimento de algunt sistema operational (Windows/Linux/MacOS X)</li> 

13 <li>Logica de programac;ao</li> 

14 </ul> 

15 </body> 

16 </html> 


Cddigo HTML 2.57: lista -seni ordem. htm l 


Arquivo: https://github,com/K19/Kl9-ExercLCLO5/archive/k02-html-fixacao42.zip 


© No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/html/public_htm1/lista-sem-ordem.html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


http: //localhost/~<USUARIQ>/htnil/piiblic_html/lista-sem-ordem.html. 


^ Crie um novo documento HTML chamado listas-aninhadas.html no projeto html em Site Root. 


1 <!DOCTYPE html> 

2 <htm 1 Lang = ,r pt-br"> 

3 <head> 

4 <meta http-equiv=" Content-Type" content=" text/html ; charset = UTF-fl" > 

5 <title>Exemplo de listas aninhadas</title> 

6 </head> 

7 <body> 

8 <hl>Exemplo de listas aninhadasc/hT> 

9 <h2>ContinentesC/h2> 

10 <ul> 

11 <li> 

12 Europa 

13 <ul> 

14 <li>Portugual</li> 

15 <li>Franga</li> 

16 <li>Alemanha</li> 

17 </ul> 

18 </li> 

19 <li> 
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20 

21 

22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 

41 

42 

43 

44 

45 

46 

47 
43 


Asia 

<ul> 

<li>Japao</li> 

<li>China </li> 

<li>lndia</li> 

</ul> 

</li> 

</uI> 

<h2>Cronogranta da minha viagem</h2> 
<ol> 

<li> 

Europa 

<ol> 

<li>Portu£ual</li> 
<li>Franga</li> 
<li>Alentanha</li> 

<7ol> 

</li > 

<li> 

Asia 

<ol> 

<li>Japao</li> 

<li>China </1i> 

<li>india </li> 

</ol> 

</li > 

</ol> 

</body> 

</htmI> 


Codigo HTML 2.58: listas-aninhadas.htmt 


ArCJliiVO: https: //github.com/KI9YK19-Exercicios/archive/k02-html-fixacao44.zip 


Q No Windows, utilize o Chrome para acessar o endere^o: 

http: //localhost/html/publicjitml/listas-aninhadas, html. 

No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/'<U5UARIQ>/htjnl/public_html/Listas-anmhadas, html. 


Q Crie um novo documento HTML chamado restaurante.html no projeto html em Site Root. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 


< ! DOCTTPE html > 

< h t m 1 lang- " r pt -br Pl > 

<head> 

<meta http-equiv=" Content-Type" content^" text/html ; charset-UTF - 8 " > 
<title>Henu - K19 Pizzaria</title> 

</head> 

<body> 

<hl>Menu - K19 Pizzariac/hl> 

<dl> 

<dt>A rnoda da casa</dt> 

<dd> 

Presunto coberto com mussarela t ovos e palmito. 

</dd> 

<dt>A ntoda do pizzaiolo</dt> 

<dd> 

Mussarela , presunto , ovos e bacon. 

</dd> 

<dt>Aliche</dt > 

<dd> 
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21 

22 

23 

24 

25 


Aliche f parmesao e rodelas de tornate. 
</dd> 

</dl> 

</body> 

</htmI> 


CodigoHTML 2.59: restaimuite.htmi 


Arquivo: https: //github . com/K \ 9/K19-Exercicios/archive/k02-html-fixacao46.zip 


© No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/html/public_html/restaurante. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~< USUAFZIG>/ht ml/pub lic_html/res taurante.html. 


© Crie um novo documento HTML chamado manual,html no projeto html em Site Root, 


1 

2 

3 

4 

5 
5 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 
19 


<!DOCTYPE html > 
cfrtml lang = ' r pt -br "> 

<head> 

<meta http-equiv~ JI Content-Type" content-" text/html ; charset=UTF -8 JI > 

<title>Operagao de saque - Manual do caixa eletronico - K19 Bank</title> 
</head> 

<body> 

<h1>Operagao de saque - Manual do caixa eletrdnico - K19 Bank</hl> 

<ol> 

<li>Insira o cartao</li> 

<li>Digite a senha</li> 

<li>Escolha a opgao de saque</li> 

<1 i>Informe o valor que deseja sacar</li> 

<li>Insira o cartao novamente</li> 

<li>Aguarde ate a 1iberagao do dinheiro</li> 

</ol> 

</body> 

</html> 


Codigo HTML2.60: marmaLhtmi 


Arqllivo: https;//github . com/K19/K19-Exercicios/archive/k02-html-fixacao4fl.zip 


© 


No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/html/public_html/rnanual. html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost/~<USUARIG>/html/public_html/manual.html. 


@ Crie um novo documento HTML chamado cursos.html no projeto html em Site Root. 


1 <!DOCTYPE html> 

2 <html lang = Jr pt - br " > 

3 <bead> 
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4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 


<meta http-equiv=" Content-Type 0 content^" text/html ; charset=UTF-S " > 
<title>K00 - Formagao Basica - K19 Treinamentos</title> 

</head> 

<body> 

<h1>KOO - Formagao Basica</h1> 


<ul> 

<li>K01 - Logica de Programagao</li> 

<li>KQ2 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
<li>K03 - SQL e Modelo Relacional</li> 

</ul> 

</body> 

</html> 


Codigo HTML 2,61: cursos.html 


Arquivo: https://github.com/K19/K1 9-Exercicios/archive/kQ2-html-fixacao50.zip 


© No Windows., utilize o Chrome para acessar o endere^o: 


http://localhost/html/public_html/cursos . html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


http://localhost/~<U5UARIQ>/html/public_html/cursos.html. 


m Crie um novo documento HTML chamado formacoes.html no projeto html em Site Root, 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 


<!DOCTVPE html> 

<html lang = ' r pt-br' 1 > 

<bead> 

<meta http-equiv = ' r Content-Type " content = "text/html ; charset = UTF-B JI > 
<title>Formagoes - K19 Treinamentosc/title> 

</head> 

<body> 

<h1>Formagdes - K19 Treinamentos</h1> 

<ul> 

<li> 

KOO - Formagao Basica 
<ul> 

<li>K01 - Logica de Programagao</li> 

<li>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
<li>K03 - SQL e Modelo Relacional</li> 

</ul> 

</li > 

< 1 i > 

K10 - Formagao Desenvolvedor Java 
<ul> 

<li>K11 - Orientagao a Qbjetos em Java</li> 

<li>K12 - Desenvolvimento Web com JSF2 e JPA2</li> 

</ul> 

</li > 

<li> 

K30 - Formagao Desenvolvedor .NET 
<ul> 

<li>K31 - C4 e Orientagao a Objetos</li> 

<li>K32 - Desenvolvimento Web com ASP.NET MVC</li> 

</ul> 

< /1 i > 

</ul> 

</body> 

</html> 


Codigo HTML 2.62: formacoes.htmt 
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Arcjliivo: https://github.co-n/KtS/Kl9-EKercicios/archive/k02-html-fixacao52.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/public^html/formacoes.html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


http: //localhost./~<USUARI(Whtml/public_html/f ormacoes.html. 


Iframes 


Um documento HTML pode center outros documentos HTML. Para adicionar uni documento 
HTML dentro de outre, devemos utilizar o elemento iframe. Esse elemento possui o atributo src. 
Esse atributo indica o caminho absolute ou relativo de um documento HTML. O conteudo do ele- 
niento iframe e utilizado pelos navegadores que nao oferecem suporte a esse elemento. Normal- 
mente, o iframe e definido pelos navegadores como inline-level element. 


1 

<!DOCTYPE html> 

2 

<html lang = ,r pt-br ,r > 

3 

<head> 

4 

<meta http-equiv = J| Content-Type" content= " text/html; charset=UTF-8" > 

5 

<title>Exemplo de frantes</title> 

6 

</head> 

7 

<body> 

8 

<hl>Ej<emplo de frames</hl> 

9 

[ <iframe src-"http : //www . kl9 . com . br"> 

10 

Esse navegador nib”suporta o elemento <i>if rame</ i> . 

11 

</ iframe> 

12 

[ < iframe src = "http://www.usp , br " > 

13 

Esse navegador nao suporta o elemento <i>iframe</ i> . 

14 

[ </iframe> 

15 

</body> 

16 

</html> 


Codigo HTML 2.63: Exemplo de frames 


*0 0 

Eke mpla dc Frames X __ 

<- C 15 lociSho£t/M{aizB/li(tTTi1/pub!)c_lilrn bifrawe.htm I 


Exemplo de frames 


* # # = 






<15 

Curso Javg 


TRHWAMENTOS 






Figura 234: Exemplo de frames 
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Importante 

No inicio do crescimento da Internet, urn grande niimero de sites utilizavam ifraines. 
Hoje em dia, os especial! stas em design web nao recomen dam mais utiliza^ao desse 


recurso, Entao, evite a utilizagao de ifraines. 


*# Links 


Normalinente, um site e forma do por um conjunfo de paginas que estao interligadas de alguma 
forma. Para perinitir que um usuario navegue de uma pagina para outra, de vein os utilizar os links. 
Basicamente, um link faz a liga^ao de uma pagina para outra do mesmo site (link interno) ou para 
urna pagina de outra site (link exferno). 

Para criarmos um link, devemos utilizar o elemento a. Esse elemento possui um atributo cha- 
mado href O valor desse atributo Indica o caminho relativo ou absoluto de uma outra pagina. Nor- 
malmente, o a e definido pelos navegadores como inline-level element. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 


<]DOCTVPE html> 

<html lang="pt-br' r > 

<head> 

<meta http-equiv = '" Content-Type " content-" textVhtjnl ; charset=UTF-B J| > 
<title>Exemplo de links</title> 

</ head> 

<body> 

<ul> 

<11 > 

f<a href=''pagina2 . html ">Exemplo de 1 i n-k com caminho relativo</a>] 

< /1 i > 

<li> 

f<a href =" outros/pagina3 , html" >0otro exemplo de link com caminho rela 1 1 vo</a>] 

< /1 i > 

<li> 

[<a href =|,, http ://'.vw. kl 9 . com . br r '> Exempto de link com caminho absoluto</a> 

</li > 

</ul> 

</body> 

</html> 


Cddigo HTML2.64: Exemplo de links 



Figitra 2,35: Exemplo de links 
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Alem do atributo href podernos utilizar o atributo target para informar onde o destino de um 
link deve ser aberto. 

* _blank: Abre o destino do link em uma nova janela ou aba. 

* _self: Abre o destino do link na mesma janela ou no mesmo frame que exibe o documento que 
contem o link. 

* _parent: Abre o destino do link na janela ou no frame onde esta contido o frame que exibe o 
documento que contem o link. 

* _top: Abre o destino do link na janela que e "ancestral ' do frame que exibe o documento que 
contem o link. 

Um link com target _self possui o mesmo comportamento de um link com target _top se esses 
links estiverem em um documento HTML que nao esteja dentro de outro documento HTML. 

Dentro de um documento HTML com diversos frames, podernos definir que o destino de um 
determinado link deve ser aberto em um determinado frame, Para realizarmos tal tare fa, o valor do 
atributo target deve ser o nome do frame onde o destino do link deve ser aberto. 

Por padrao, o destino de um link e aberto na mesma pagina ou frame onde ele esta contido. Em 
outras palavraSp se o atributo target nao for definido explicitamente, o padrao e o comportamento 

do _seif. 


1 

< !DOCTVPE html> 

2 

chtml lang = " pt-br ■" > 

3 

<head> 

4 

<meta http - equi v = J| Content - Type 1,1 con t ent = " text/html ; charset=UTF -S " > 

5 

<title>Exemplo de uso da tag a com o atributo target </ title> 

6 

</ head> 

7 

<body> 

3 

<ul> 

9 

<li> 

10 

[<a href= " pagi na • . html 1 2 3 4 tar get-" .blank ,r >Abre em outra janela ou aba</a>' 

11 

</li> 

12 

<li> 

13 

[<a href = r ‘ pagina2 . html target- " _self " >Abre na mesma janela on aba</a>] 

14 

< /1 i > 

15 

<li> 

16 

[<a href="pagi na 3 . html ,r >Abre na mesma janela ou aba</a>' 

17 

</li> 

18 

</ul> 

19 

</body> 

20 

</html> 


Codigo HTML 2.65: Exernplo de links com target 


Exerclcios de Fixa^ao 


0 Crie do is arquivos chamados links-origem, html e links-desti no Jitml dentro do projeto html 
em Site Root. 


1 <!DOCTVPE html > 

2 <html lang = ,r pt-br"> 

3 <h»ead> 

4 <meta http-equiv = J| Content-Type" content= " test/html ; charset=UTF-8" > 
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5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 


<title>Exemplo de links - origenn</title> 

</head> 

<body> 

<hl>Exemplo de links - origem</h1> 

<ul> 

<lixa href =l, http ://www. kl 9 . com. br" target = " .blank ">Link externo</aX/li> 
<li><a href = "links-desti no . html J| target= "_self ">Link interno</aX/li> 
<lixa href = " links - dest i no . html " target = ''_top" >Li nk interno</a></p> 

<lixa href=" links-destine . html ">Link interno</a></li> 

</ul> 

</body> 

</html> 


Codigo HTML 2. 66 : tinks-origem. h tmi 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 


< 3 DOCTfPE html> 

< bt m 1 lang=" pt -br’ 1 > 

<head> 

<meta http-equiv = ,r Content-Type" content- 1 ’ text / html ; charset=UTF-8" > 
<title>Exemplo de links - destino</title> 

</head> 

<body> 

<h1>Exemplo de links - destino</h1> 

</body> 

</html> 


Codigo HTML 2.67: links-destine.html 


Arquivo: https: //github. com/K19/K1 9-Exercicios/archive/k02-html-fixacao54.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/public_htinl/links-origein. html. 


No Ubuntu, utilize o Chrome para acessar o endereqo: 


http://localhDst/'<USUARIO>/html/public_html/links-origem.html. 


Ancoras 


Alem de criar links para outras paginas, podemos criar um link para uma determinada segao 
de um documento HTML, Esse recurso e chamado de ancoragem. O primeiro passo para utilizar 
esse recurso e identificar a secao que sera o destino desse link. Essa identificaqao e realizada com o 
atributo id. O id e um atributo global, ou seja, todos os elementos possuem esse atributo. O segundo 
passo e criar os links utilizando os identificadores das seqoes de acordo com a sintaxe do exemplo a 
seguir. Observe a utiliza^ao do caractere #. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 


< ! DGOTPE html > 

<html lang = ’ r pt-br"> 

<head> 

<meta http-equiv=’' Content-Type r ’ content^ 1 ’ text/html ; char set = UTF-8 J| > 
<title>Exemplo de ancoras</title> 

<7head> 

<body> 

<hl>Exemplo de ancoras</h1> 

<ul> 

<li> 

[<a href= ri #brasi! M >Brasil</a>| 
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12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 


</li > 

<li> 

[<a href= n # h Istor i a r ' >H i s 1 6 r i a<7 a>] 

</li> 

<li> 

f<a href = r, #geog;raf i a ,F >Geo£raf ia</a>j 

< / 1 i > 

<li> 

f< a h r e f = H 4 de it:c g ra f i a ' > Demograf ia</ a >j 

< / 1 i > 

<li> 

f<a href=" http : //pt. Wikipedia . org /wi ki / Bra si 1# Econo mi a ,r >Economi a </a>] 

</li > 

</ul> 

[< h 2 i d = 11 b r a s i 1 ''' >fi r a s i 1 < / h 2 >] 


[< h 3 f :l = " h i 2 1 o r 1 1" > HI s 16 r I a < / h 3 >| 


fell| i d = | e-;og rar 1 11 >Geogra f ia </ §j >| 


[<h3 id^dercografia " >Demograf ia</h3?1 

</body> 


Codigo HTML 2,68: Exemplo de ancoras 


& ^ ^ .J " Ejcc mplo de inccfu x '• 

'f* C \h local host/- kelzoy ht m I /poblicjirm I /a- 02 . h rml 5 


Exemplo de ancoras 

* Brasil 

* H istoria 

* Geografia 

* Dcmagrafia 

* Ecormmia 

Brasil 


Hisltirui 


tJeografia 


DonoKrafia 



Figura 2,36: Exemplo de ancoras 
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Exercicios de Flxa^ao 


^ Crie urn documento HTML chamado ancor as Dhtml no projeto html eni Site Root, Adicione 
urn link para uina segao dentro desse documento. Dica: insira conteudo suficiente para que a barra 
de rolagem vertical do navegador aparega. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 


<]DOCTfPE html> 

< ht m 1 lang = " pt - br' 1 > 

<head> 

<meta http-equiv = i " Content-Type" content^ 11 test / html ; charset=UTF-8" > 

<title>Exemplo de ancoras</title> 

</head> 

<body> 

<h1>Exemplo de amcoras</h2> 

<ul> 

<li> 

<a href = sobre J| >Sobre o texts dessa pagina</a> 

</li > 

</ul> 

<p>l_orem ipsum dolor sit amet, consectetur adipiscing elit. Donee justo 
massa , sodales sit amet eleifend a r elementum eu nibh, Donee egestas dolor 
quis turpis dictum tincidunt, Donee blandit tempus velit, sit amet 
adipiscing velit consequat placerat, Curabitur id mauris,</p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p>At nisi inperdiet lacinia, Ut quis arcu at nisi ornare viverra, 

Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque 
feugiat accumsan commodo. Proin non urna justo, id pulvinar lacus.</p> 

<h2 id=" sobre" >Sobre o texto dessa pagina</h2> 

<P> 

0 texto dessa pagina foi gerado atraves do site: 

<a href="http://www.lipsum . com/ ">http ://www. 1ipsum.com/</a> 

</p> 

</body> 

</html> 


Codigo HTML 2.69: ancoms 1 . h tmi 


Arquivo: https://gLthub. com/K197K19-Exercicios/archive/k02-html-fixacao56.zip 


m No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/html/public_html/ancoras1.html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


http://localhost/'<U5UARIO>/html/public_html/ancorasl.html. 


© Crie um novo arquivo chamado ancoras2.html no projeto html em Site Root. Identifique uma 
segao com o norne ok. Dica: insira conteudo suficiente para que a barra de rolagem vertical do 
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navegador aparega. 


1 

<!DGCTfPE html> 

2 

<htrail lang=" pt-br"> 

3 

<head> 

4 

<meta http-equiv = JI Content-Type" content^ 1 * text/html ; charset=UTF-8 J| > 

5 

<title>Exercicio sobre ancoras</title> 

6 

</head> 

7 

<body> 

3 

q 

<hl>Ancora pagina 2</h1> 

10 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donee justo 

ii 

rnassa, sodales sit amet eleifend a r elementum eu nibh. Donee egestas dolor 

12 

quis turpis dictum tincidunt. Donee blandit tempus velit, sit amet 

13 

adipiscing velit consequat placerat. Curabitur id roauris </p> 

14 

<p> ... </p> 

15 

<P> ... </p> 

16 

1 7 

A 

Cl 

V 

A 

o. 

V 

18 

<p> at nisi imperdiet lacinia. Ut quis arcu at nisi ornare viverra. 

19 

Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque 

20 

21 

feugiat accumsan commodo. Proin non urna justo, id pulvinar lacus.</p> 

22 

23 

<h2 id = ,r ok r *>0K</h2> 

24 

<p>Se voce chegou aqui deu tudo certo! :)</p> 

25 

</body> 

26 

</html> 


Codigo HTML 2 70: ancoms2.html 


Arquivo: https://github.com/KI9/K19-£xercicios/archive/k02-html-fixacao58.zip 


Crie um novo link no arquivo ancoral.html que aponte para ancora ok do arquivo ancoras2.html. 


1 

<!DOCTVPE html> 

2 

<ht.ml lang = ,r pt-br''> 

3 

<head> 

4 

<meta http - equiv = J| Content-Type" content^'* text/html ; charset = UTF-S " > 

5 

<title>Exemplo de ancoras</title> 

6 

</head> 

7 

<body> 

3 

<h1>Exemplo de ancoras</h2> 

9 

<ul> 

10 

<11> 

11 

<a href = '*# sobre " >Sobre o texto dessa pagina</a> 

12 

</li > 

13 

; <1 i> 

14 

<a href = " ancoras2 , htniltfok ">Seq-ao 0K</a> 

15 

I </li> 

16 

</ul> 

17 


18 

<p>l_orem ipsum dolor sit amet, consectetur adipiscing elit, Donee justo 

19 

massa , sodales sit amet eleifend a, elementum eu nibh. Donee egestas dolor 

20 

quis turpis dictum tincidunt. Donee blandit tempus velit, sit amet 

21 

adipiscing velit consequat placerat. Curabitur id mauris.</p> 

22 


23 

<p> ... </p> 

24 


25 

<p> ... </p> 

26 


27 

<p> ... </p> 

28 


29 

<p>At nisi imperdiet lacinia. Ut quis arcu at nisi ornare viverra. 

30 

Duis vel tristique tellus. Maecenas ultrices placerat tortor. Pellentesque 

31 

feugiat accumsan commodo. Proin non urna justo, id pulvinar lacus.</p> 

32 
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33 

34 

35 

36 

37 
33 
39 


<h2 id = " sobre Jl >Sobre o texto dessa pagina</h2> 

<p> 

0 texto dessa pagina foi gerado atraves do site: 

<a href = " http : //www. lip sum . com /"> http : //www, lipsum . com/</a> 
</p> 

</body> 

</html> 


Codigo HTML 2.71: ancomsLhtmi 


Arquivo: https://github.com/K19/K19-Exercicios/archive/kQ2-html-fixacao59,zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/public_html/ancGrasl.html. 

No Ubuntu, utilize o Chrome para acessar o endere^o: 


http: //local host/~<USUARIG>/html/public_htiiil/ancor3sl . html, 


Imagens 


Certamente, os sites seriarn muito entediantes se nao fosse possivel adicionar Imagens ao con- 
teudo das paginas. Podemos adicionar imagens em docurnento HTML com o elemento img. Esse 
elemento possui um atributo chamado src, Esse atributo indica o caminho absolute ou relativo da 
imagem que queremos adicionar. Normalmente, o img e definido pelos navegadores como inline- 
level element. 


O elemento img possui um atributo obrigatorio chamado alt. Esse atributo define um texto al¬ 
ternative que pode ser utilizado, por exempio, se houver um problema ao carregar a imagem ou por 
softwares de leitura de tela. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 


<!DGCTfPE html > 

<html lang = "pt-br'‘> 

<head> 

<meta http-equiv = ,r Content-Type n content^ text/html ; char set = UTF-B JI > 

<title>Exemplo de imagens</title> 

</ head> 

<body> 

<h1>K19 Treinamentos</h1> 

f< i nig s r -c = " h i t p : / / www . k 1 9 . c on , b r / c 5 5 / 1 Tig / it a 1 n - h ea d e r - 1 o go . p "g '' a 11 — " K1 S- J / >' 

<h2>Cursos</h2> 

<ul> 

<li> 

[< img src = " h 11p : 77 www . k 1 9 . con . br/css/ing/k01 - l o go -1 a r ge . prig " a 1 1 = •'K01 '7>] 

KOI - Logica de Programagao 
</li > 

<li> 

[< img 5rc — " hit p : / / www . ki 9 . con . br / css Zing AC-2- logo - large . pig'' alt = ' K0 2 ' / >] 

K02 - Desenvolvinento Web con HTML, CSS e JavaScript 
</li > 

<li> 

f< img src = lf http : // www .k19.com.br/css/img/k03- logo - large . png *' alt-" K03- '''/>] 

K03 - SQL e Modelo Relacional 
< /1 i > 

<li> 

[< img arc- "http : //' a'.-jw . k 1 9 . con . br/ css / i Tig A 1 1 - logo -large, png r ' a 11 = r ' K11 ri / >] 

K11 - Grientagao a Objetos en Java 
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23 

29 

30 

31 

32 

33 

34 

35 


< / 1 i > 

<li> 

[ciflig src = ' http : //www . kl 9 . com .br/css/ img/kl 2 - logo - large . png" alt = fl Kl 2 p '7>] 

K12 - Desenvolvimento Web com JSF2 e JPA2 
</li> 

</ul> 

</body> 
c/html> 


Cadigo HTML 2.72: Exemplo de imagens 



Figum 237: Exempb de imagens 


Tambem podemos definir urn tooltip para uma imagem com o atributo title. 


1 I <img src=" http;/ / www . kl 9 . com . br/css/img/main-header - logo . png u a 11 =■ w K 1 9 ftl tTiT^T T 9^ > 


Codigo HTML 2.73: Exemplo de imagens 


*W URLs absolutas e relativas 


Os links e as imagens podem ser adicionados em um documento HTML com URLs absolutas on 
relativas. 
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1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 


<!DOCTYPE html > 

<html lang = ' r pt-br' r > 

<head> 

<meta http-equiv = JI Content-Type" content^ 1 ' text/html ; char set = UTF-£ J| > 
<title>URLs absolutas e relativas</title> 

</head> 

<body> 

f<img src-" imagens/kl9 - 'logo . png M a 1 1 = ' kT9 Fl > ] 

[<a h ref = ” paginas / cursos . html n >Cursos</a>] 

</body> 

</html> 


Codigo HTML 2.74: httpMunmv. hi9. com.br/iiidex•, htm l 


No exemplo acima, a URL do documento HTML e http://wivw.kl9xom.br/index.html. Nesse 
documento, uma imageni e um link foram adicionados com URLs relativas (imagens/kl 9-logo, png e 
paginas/cur sos.html} . For padrao, essas URLs sao relativas a URL do documento HTML que contem 
a imageni e o link. Dess a forma, a URL da imageni e http://www.kl 9xom.br/iinagens/kl 9-logo, png 
e a do link e http://www.kl9xom.br/paginas/cursos.htinl. 

A mesma imageni e o mesmo link podem ser adicionados com URL absoluta. Veja o exemplo a 
seguir. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 


<!DOCTYPE html> 

<html lang=' r pt -br ,r > 

<head> 

<meta http-equiv = J| Content-Type" content-" text/html ; charset=UTF-8 " > 
<title>URLs absolutes e relativas</title> 

</ head> 

<body> 

f<iiHg src = * http : 77 www . k19 . com . br~7~Lmagens/kl9 - logo . png rl a 1 1 = rl K T9 > ] 
[<a href = 11 http : //www . k 1 9 . com . hr / pagl nas / curs os . html " >Curso5</a>] 

<7body> 

</html> 


Cod igo HTML 2 .75; h ttp'JIwiuw. k 19. com , br/i i idex. htm l 


Podemos definir uma URL base para as imagens e os links adicionados em um documento HTML 
com URLs relativas. A URL base e definida no valor do atributo href do element© base. Esse eiemento 
deve ser adicionado no conteudo do eiemento head. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 


<!DOCTYPE html > 

<htral lang = ' r pt-br "> 

<head> 

<meta http-equiv^ 1 " Content-Type " content^" text/html ; charset=UTF-£ J| > 
[<b.3se h ’■ e f = " h t1 p : / / www . k 1 3 . con . br / site 1 > ] 

<title>URLs absolutes e relativas</title> 

</head> 

<body> 

<img src = " imagens/k 1 9 - logo.png" alt="K19"> 

<a href=" paginas/cursos.html ">Cursos</a> 

</body> 

</html> 


Codigo HTML 2.76: Www.hi 9.com.hrfindex, h tmi 


No exemplo acima ? a URL da imagem e http://w r ww,kl 9xom.br/site/imagens/kl9-logo.png e a 
do link e http://wwiv.kl9xom.br/site/paginas/cursos.html. 
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Exercicios de Flxa^ao 


© Crle um documento HTML em um arquivo chamado imagens, html no projeto html em Site 
Root com algumas imagens. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 


<!DGCTYPE html> 

< ht m 1 lang=" pt-br' 1 > 

<head> 

<meta http-equi v = ' r Content-Type 0 content-" text /'html.; charset=UTF - B" > 

<title>Exemplo de imagens</title> 

</head> 

<body> 

<h1>K19 Treinamentos</h1> 

<img src = " http : //www , kl 9 , com , br /css / img/main-header - logo , png" alt = r ' K19" /> 

<h2>Cursos</h2> 

<ul> 

<li> 

< img src = " http : //winw , kl 9 , com , br/figs/kOI - logo - large . png" alt = " KOI J| /> 
KOI - Logica de Programagao 

< /1 i > 

< 11 > 

< img src = ' r .http : //www . kl 9 . com . br / figs / k02 - logo - large . png' 1 alt. = " K02' 1 /> 
K02 - Desenvolviinento Web coin HTML f CSS e JavaScript 

< /1 i > 

< 1 i > 

< img src = HI http : //www . kl 9 . com . br /f igs/ k03 - logo - large . png" alt = " K03 " /> 
K03 - SQL e Modelo Relacional 

</li > 

<li> 

< img src- ir http : // www . kl9 . com . br /figs/kl 1 - logo-large , png' 1 alt = J| Kl 1 "/> 
Kl 1 - Orientagao a Objetos em Java 

</li > 

<l.i> 

<img src = ,r http : //www . k!9 . com . br/figs/kl 2-logo-large .png' 1 alt= 11 Kl 2' r /> 
K12 - Desenvolvimento Web com JSF2 e JPA2 
</li > 

</ul> 

</body> 

</html> 


Codigo HTML 2.77: imagens.html 


Arquivo: https://github.com/KIB/KI9-Exercicios/archive/k02-html-fixacao61.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 

h ttp://localhost/html/public_html/imagens.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://loca1host/~<USUARIO>/html/public_html/imagens.html. 


"IP Tabelas 
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Suponha que voce esteja desenvolvendo o site de uma empresa e precisa apresentar alguns re- 
iatorios em documentos HTML. Considere que os dados desses relatorios sao obtidos a partir de 
planilhas. Dal surge a necessidade de exibir dados de forma tabular em p agin as web. 

Para resolver esse problema, podemos utilizar o elemento table. Esse elemento permite apre¬ 
sentar dados de forma tabular. As linhas de uma tabela sao definidas com o elemento tr, as celulas 
de titulos com o elemento th e as celulas de dados com o elemento td. Os elementos th e td pos- 
suem um atributo chamado col span e outro chamado rows pan. O colspan define quanta s colunas 
uma celula deve ocupar e o rowspan define quantas linhas uma ceiula deve ocupar. Normalinentep 
o table e definido pelos navegadores como block-level element. 


1 

<! DQCTYPE html > 

2 

<html lang=" pt - br Jl > 

3 

<head> 

4 

<meta http-equiv- JI Content-Type " content^" test/html ; charset=UTF-B" > 

5 

<title>Exemplo de tabela</title> 

6 

</head> 

7 

<body> 

3 

<h1 >Carros</h1> 

9 

| <table> 

10 

<tr> 

11 

<th>Marca</th> 

12 

<th>Modelo</th> 

13 

<th>Ano</th> 

14 

( <7tr> 

15 

<tr> 

16 

<fd >T oyot a </ td> 

17 

<td>Corolla </ td> 

IS 

[ <td>2010</td> 

19 

[ </ tr> 

20 

[ <tr> I 

21 

<td>-Honda</td> 

22 

<td>Ci vi c<7td> 

23 

<td>201 1 </1 d > 

24 

i </tr> 

25 

<t r> 

26 

[ <td>Mi tsubishi </td> 

27 

<td>Lancer</td> 

28 

f <td >2012 <7td> 

29 

[ </ tr> | 

30 

<t r> 

31 

<td colspan =" 3" >Ultima atualizagao: 06/201 2</td> 

32 

< / tr> 

33 

</ table> 

34 

</body> 

35 

</ html > 


Cod i go HTML 2.78: Exempto de tabela 
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^ r - ! ^ Eke mplo de tabela 

.* 

<- C 12 local host;-’keizo/lit ml/'publiejitml/tible-ty-th-td.html 

<a*i« * * = 

Carros 


Marta ModcLo Am) 


Toyota Corolla 2010 


Honda Civic 2011 


Mitsubishi Lancer 2012 


Oltima amaliza^aoL 06/2012 



Figum 2.38: Exemplo de tabeta 


Cabe^alho, corpo e rodap6 


Para melhorar a semantica das tabelas, podernos definir explicitamente o cabe^alho, o corpo e o 
rodape de lima tabela atraves dos elementos thead* tbody e Ifoot respectivamente. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 


<!DOCTYPE html > 

<html lang = Jr pt-br'"> 

<head> 

<meta http-equiv = J| Content-Type" content-" test/htmlcharset=UTF-E " > 
<title>Exemplo de tabela</ti tle> 

</head> 

<body> 

<h1 >Carros</h1> 

<table> 

[<thead>] 

<tr> 

<th>Marca</th> 

<th>Modelo</th> 

<th>Ano</th> 

</tr> 

[</ thead>] 

f<TfooT>] 

<tr> 

<td colspan=" 3 ">Ultima atualiza^ao: 06/201 2</td> 

<ytr> 

[</ tfoot>] 

f< t bo dy > | 

<tr > 

<td>Toyota</td> 

<td>Corolla</td> 

<td>201Q<7td> 

</tr> 

<tr> 

<td>Honda </ td> 

<td>Civic</td> 

<td>2011</td> 

</tr> 

<tr> 

<td>Mitsubishi</td> 

<td>Lancer</td> 

<td>2012</td> 

< /1 r > 

[</ tbody>) 

</table> 

</body> 

</ html> 
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Codigo HTML 2.79: Exemplo de tabela 




i 

90 0 

iLKEmpio de LjbcU 

«- c 

12 local host/- ke wof ht m 1 /publicjitm 1 /ta We-tf-Th-td, html 

q*; 4 # # = 

Carros 


Marta 

ModeLo Arm 


Toyota 

Corolla 2010 


Honda 

Civic 2011 


Mitsubishi 

Lancer 2012 


Oltima atualiza^ho; 06/2012 




Figum 2.39: Exemplo de tabela 


Repare que visualmente nao mudou absolutamente nada. Alern disso, apareceram mais alguns 
elementos: thead, tfoot e tbody. 

Qual e a semantica desses elementos? 

* thead: define o cabecalho da tabela 

* tfoot: define o rodape da tabela 

* tbody: define o corpo da tabela 

Por que complicar? Qual o motivo da exlstencia desses elementos? 

* O elemento thead, assirn como o tfoot, servem para agrupar as linhas de cabecalho e de ro¬ 
dape, respectivamente. 

* O codigo fica mais claro, 

* Facilita a aplica^ao de estilos CSS (atraves do seletor de elemento) 

* Os navegadores podem utilizar barras de rolagem para exibir o conteudo de uma tabela longa. 
Essa caracteristica nao e obrigatoria. 

* Na impressao de uma tabela longa, a ferramenta utilizada pode replicar o cabecalho e o rodape 
em todas as paginas. Essa caracteristica nao e obrigatoria. 

Ti tul os 

Tarnbem podemos definir um titulo para uma tabela atraves do elemento caption. Esse elemento 
deve ser o primeiro filho do elemento table. 

1 <!DOCTYPE html> 

2 <htm 1 lang^'pt-br'^ 

3 <head> 

4 <meta http-equiv=" Content-Type IJ con t en t =" text / htjnl ; charset=UTF-S'" > 

5 <title>Exemplo de titulo de tabela</title> 

6 </head> 
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7 

8 
9 

10 

11 

12 

13 


<body> 

<table> 

[< c a p 1 1 orT>C arros<7cap tiorT>; 

</table> 

</body> 

</html> 


Codigo HTML 2.30: Exemplo de titulo de tabela 



Figura 2,40: Exemplo de titido de tabela 


Agrupando colunas 


Podemos dividir as colunas de uma tabela eni grupos. Normalmente, o principal niotivo para 
estabelecer essa divisao e poder depois definir formatagoes especificas para cada grupo de colunas. 
Para dividir em grupos as colunas de uma tabela, devemos utilizar os elementos colgroup e col O 
atributo span do elemento col define a quantidade de colunas de um determinado grupo, 

1 

2 

3 

4 

5 

6 

7 

8 
9 

10 
11 
12 

13 

14 

15 

16 

17 

18 

19 

20 


<!DOCTVPE html> 

< h t m 1 lang = ,r pt-br" > 

<head> 

<m 0 ta http-equiv-' 1 Content-Type w content^ 1 ' test/html ; charset=UTF-S" > 

<title>Exeinplo de agrupamento de colunas</title> 

</head> 

<body> 

<h1>Carros</h1 > 

<table> 

<colgroup> 


<!-- Agrupando a printeira e a segunda coluna 
<col sparv= J '2" style = "bacRground-color : gray J| > 


<!-- Agrupando apenas a terceira coluna 
<col style = "background -color : yellow ,r > 


</ colgroup> 


</ table> 
</body> 

</html> 


Codigo HTML 2.81: Exemplo de agrupamento de colunas 
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Figum 2,41: Exemplo de agrupamento decolunas 



Exercicios de Fixa9ao 


Q Crie uma pagina HTML em um arquivo chamado tabela.html no projeto html em Site Root que 
contenha uma tabela de acordo com a imagem abaixo: 


^. ^ © Excrckio para a tag tabic 

G? & locaihost/kD,2 - exe mplos/capitu I o-02/exerciciD-table.html 


Marea 

Moddo 

Ano 

Toyota 

Corolla 

2010 

Caitiry 

zon 

Honda 

CiTlc 

2004 

Fit 

2012 

City 

*2011 

Mitsubishi 

Lancer 

2012 

ttliiim aLukdizajcao: 06/2012 


2 # \ 


Figum 2A2: Exerddo para a tag table 
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As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizagao do pro 
blema. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 

44 

45 

46 

47 

48 

49 

50 

51 

52 

53 

54 


<!DOCTVPE html> 

< h t m 1 lang-' 1 pt-br' 1 > 

<head> 

<meta http-eqtiiv = J| Content-Type" content= "test/.html ; charset=UTF-8" > 
<titl&>Exercicio de tabela</title> 

</head> 

<body> 

<table> 

<thead> 

<tr> 

<th>Marca</th> 

<th>Modelo</th> 

<th>Ano</th> 

</tr> 

</ thead> 

<tfoot> 

<tr> 

<td colspan= "3 ”>01tima atualizatao: 0672012</td> 

</tr> 

</ tfoot> 

<tbody> 

<tr> 

<td rowspan=" 2 ">Toyota</td> 

<td>Corolla</td> 

<td>2010</td> 

</tr> 

<tr> 

<td>Camry</td> 

<td>2011</td> 

</tr> 

<tr> 

<td rowspan= n 3 ”>honda</td> 

<td>Civic</td> 

<td>2004</td> 

< /1 r > 

<tr> 

<td>Fit </td> 

<td>201 2</td> 

</tr> 

<tr> 

<td>City</td> 

< t d > 2 011</td> 

</tr> 

<tr> 

<td>Mitsubishi</td> 

<td>Lancer</td> 

<td>2012</td> 

<71 r > 

</ tbody> 

</ table> 

</body> 

</html> 


Codigo HTML 2.82: tabekuhtmi 


Arquivo: https: /7github.com/K19/K19-Exercicios/archive7k02-html-fixacao63.zip 


© No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/html/publicjitml/tabela, html, 
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No Ubuntu, utilize o Chrome para acessar o endereco: 


httpr//localhost/ r '<USUARIO>/htjnl/public_htnil/tabela. htmL 


© Altere o arquivo tab el adit ml do projeto html que esta ein Site Root. 


1 

<!DGCTYPE html > 

2 

< h t m 1 lang = " pt -br' 1 > 

3 

<head> 

4 

<meta http-equiv = J| Content-Type" content^ H text/html ; charset=UTF-8" > 

5 

<title>Exercicio de tabela</title> 

6 

</head> 

7 

<body> 

8 

<table> 

3 

[ " <captibn>CarrQS</caption> 

10 

f <colgroup> 

11 

<col span="2" style = JI background -color : gray " > 

12 

[ <col style= M background-color:yellow" > 

13 

</ colgroup > 

14 


15 

</table> 

16 

</body> 

17 

</html> 


Codigo HTML 2.83: tabela.html 


ArCJUiVO: https://Eithub.com/K19-/KT9-Exercicios/archive/k02-html-fixacao65.zip 


© No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/html/public_html/tabela.ht[nl. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //lQcalho5t/~<U5UARIO>/html/public_html/tabela. html. 


Formularios 


Alguns sites e praticamente todas as aplica^oes web necessitam obter informacoes enviadas pe- 
los usuarios. Por exemplo, considere uma empresa que deseja receber os pedidos dos seus clientes 
atraves do seu site. O site dessa empresa precisa oferecer alguma forma de interagao que possibilite 
o recebimento de dados fornecidos pelos usuarios. 

Para tornar os sites e as aplica^oes web mais interativos, podemos utilizar formularios. Atraves 
dos formularios, os usuarios podem enviar informacoes aos Web Servers. 

Para criar uin formuiario, devemos utilizar o elemento form. Esse elemento possui um atributo 
chamado action. O valor desse atributo indica para qual endereco os dados do formuiario serao 
enviados. 


1 

2 
3 


<form act .ion = " pa gin a . html ,r > 
</form> 
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Os formularios sao compostos por caixas de texto, checkboxes, radios, caixas de selegao, botoes, 
entre outros componentes. Provavelmente, voce reconhecera diversos desses componentes na ima- 
gem abaixo. 


Caixa de texto 


Caixa de senha Caixa de data 


Nome: j jonas _| Senha: _ Nascimenlo: D9/ifl;aoi3 ; ▼ 


September 2013 ~ 


Sun 

Mom 

Tue 

Wed 

TSiu 

fri 

Sat 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17 

IS 

19 

2D 

21 

22 

23 

24 

25 

26 

27 

28 

29 

30 







Checkboxes 

Radio 

Botoes 

Java 14 C# (4 PUP □ 

Manila Tardc ■ Noite 

□k cancel a i' 


Figura 2.43: Componentes deformuMrio 


Caixas de texto 

Geralmente, os formularios possuem uma on mais caixas de texto. As caixas de texto sao adici- 
onadas nos documentos HTML atraves do elemento input. Esse elemento possui um atributo cha- 
mado type. Para definir uma caixa de texto, o valor do atributo type deve ser text. Normalmente, o 
input e definido pelos navegadores como inline-level element. 

1 I<input type=" text" > | 


Considere um formulario com divers as caixas de texto. Quando as informagoes preenchidas 
nesse formulario chegarem ao Web Server, certamente, ele preclsara saber o que fol preenchido em 
cada caixa. Por isso, e necessario identificar esses dados, O atributo name do elemento input e 
utllizado para resolver esse problema. 


<input type=" text 1,1 
< input type = "text" 

name = fl endereco ,r |> 

[name-' 1 ci dade "1> 


Par&metros, GET e POST 


Vamos analisar como os valores preenchidos nos formularios sao enviados aos Web Servers. Con¬ 
sidere o seguinte exemplo. 
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n p.aram«tra5, CO e POST 

- 

f 4 C L L i«Kalhosty-kei?o/hlrml^iNjti1ic_iirjTil/paranietrio5-lirtp-01-htnil 

* * = 

Parametros, GET e POST 


Nome Estado Envia^ 


Elements 1 Renounces Newark Sources Timeline Profiles Audits Console 


H Styles Computed Event Listeners * 

t -.ht ■’if 1 dEijj"-" p t— b r 

T-fhead> 

+ 'W*- 


■cncta nttp-l:q!JJ.v=■"C□^ , te■nt-T■)■pe ,l cnntent= M tcxt/htrLj charsEt=Ul"F-0"> 
iretros, GET e POST-v title* 

^/hcdd* 

T^hadjfv 

^hl*Pnrfineirnt, GET c P05T*/ht* 
t ■3ctliin”' , caida5.t ro, lunV* 

■-1,1 PL-- L tL-ir»"juixfi : r."jtiua-':/1 .jini I j. _ 

input id="noTE id" typr="tExl" PBrie="nn.<ie" 

Q-'inpur id^'e-sinda-LC' type- "tsirt " nane-»" cs-tad d">J 

j input types" iuoiiii 11 walLim epuiaf i- 

*/TQrn> 

<ft> Pdy* 



Figura 2.44 ; Pardmetros HTTP 


O formulario acima possui duas caixas de texto. Nas duas, o a tribute name foi definido. Quando 
as caixas forem preenchidas e o formulario enviado, os dados desse formulario sao adicionados na 
requisigao HTTR 


> 0 O 


Parametndi, GET r POST 


C Li i«aihost/-kei7<?/Ktml/fw : biic_iirfril/parainnetiricis-iinp-01-htnn-l 


Q* « * * 


Parametros, GET e POST 

Nomo^j&r&i Hr&ta jEstado^SP ij Enviar 


x | Elements Resources Netrcork Sources- Timeline Profiles Audits Console 


f-chtnl lflng-"pt-hr"? 

Tthead* 

^nets hitp-eQuiv-"Content-Type" content-" tex.tyhtrl; sharset-UTF-E 
<tLtln:-PariiiEt ros , GET * POST</title> 

■=/hEdd=- 
v ihudy* 

<hl>Pnrinetrns, GET c FQ 5 T*/hI* 

T xfcrri ac tinn-"c ada^t ro. htnL"*- 

< label far="nnse_Id'"=Ndri^/label* 

■«-input id-"h«e_ii3" type^"-eyt. M nanW 1 nnae“* 

■c lahe L To r-" es cado - td L, >Eit ado-c/Tnhe t> 

■cinput id="EstBdo_ic'‘ typr=“Lext" nane~"EitaifD"> 

* input type=" 5 iibnlf valus^'EnvIsi- 1 * 

*ybndy> 

■=/htriL* 


I Styles Computed Event Listeners * 

+ ;: t= Q- 


Figura 2.45: Pardmetros HTTP 


Observe na imagem abaixo que os valores preenchidos nas caixas de texto sao enviados como 
parametros na URL da requisigao HTTR Os nomes dos parametros sao exatamente os nomes defini- 
dos nas caixas de texto com o valor do atributo name, Note tambem que os valores dos parametros 
fleam expostos na barra de enderego do navegador. 
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^ Pararntros, -CCT e POST 



Figum 2.46 ; Parametros HTTP 


Muitas vezes, nao e adequado exibir os valores dos atributos na barra de endereqo dos navega- 
dores. Podemos ocultar esses valores adicionando o atributo method com o valor post no elemento 
form. Esse atributo aceita apenas dois valores: get e post. Ele define o tipo de requisiqao HTTP que 
o navegador deve realizar para enviar o formulario. Nas requisites do tipo GET, os parametros sao 
adicionados na URL da requisicao. Nas requisites do tipo POST, os parametros sao adicionados no 
conteudo da requisiqao. 


& ^ O Paranecros, -CtT t POST _ 

^ O Q local host/«kei7o/litmUputiJ(^.hlm tjf parametno5-lirtpH31.html ^ v" ^ ^ S 

Parametros, GET e POST 

Nome 1 | Estado | I Enviar 


■ Elements Resources Nemorfc Sources Timeline Profiles Audits. Console 



Styles Computed Event Lists r?er£, 11 

T'ihttil ldns-"pc-br"> 

► ^Hcad> T ,<i'hea!f> 

T ^:bndy> 

iht^Pararjetr-Di, GET e POST^/t 
■f ^f-orn seti on-" e sflatt ro, htn L"| 

■rlaoe L fa r-" nn tc_ Ld "■ Nand-r 
^input id='’nswE_j.d" tvpe="£ 
*Ubel Ttir-"i?s r .s(Jij_id"jE4ta 
^input id-"estada_:c' typt= 
-input Cype="subnet" vaTue= 

</ body*' 

)1=. 


[ffnirhd.rH"Dosi^ 

TflC.iL'- 

EJtt" nnrie="nnBe M =. 
do</la1te1> 

"teKt" nane."E-tt , ad'p"> 


m 

qT 

-nEW5CTYre> 






Figum 2.47: Pardmetros HTTP 
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n r\ Parametros, CCT e POST __ 

<- -> C L!l iwialhQsty^keizo/htm^iMjtillOiTil/paranietros-lirtp-Ol-JitrTl 


Parametros, GET e POST 


<*#<►* = 


.:■ " N r.;tj j 


Envia-^ 


* i Elements ■ Resources Nei-Aork. Sources Timeline Profiles Audits Console 

M -ff i Styles Computed Errant 

**htm lanfl-"pt-br".* . 

► thcad^i/hcad> + ^ 

^hi^Paraiiieif DSf GET e PQ5T*;/hl> 

* [jrrj sc 11 on’" cadast ro, ht™ L" nothod- "post "3“ 

< labe l ta r-" nnse_ id ">Nond--Y labe L> 

^ input id= ll n?>'iE_,id" t¥pe="tEnrt" r,Hrtc=" nn xe H > 

<label To r-" os ta<Jo_Id' '-»Es ta de</T.abel> 

■:input id-"d-!dadQ_Lc" type-"te)£t" nine-"EitaiD'V 
-=input type="subriit" vaT.ue="Env.LBr"* 

</Tora> 

-i/bBdy> 

■=:/htnl> 



Ffgura 2.48: Parametros HTTP 



Figura 2.49: Parametros HTTP 


R6tulos 

Nos formularios, os rotulos sao fundamentals para informar aos usuarios quais dados devem ser 
preen chidos. Para adicionar uni rdtulo, devem os utilizar o elemento label Os textos dos rotulos sao 
definidos no conteudo desse elemento. 
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1 

[<label>Nome: 

</label>] 

2 

<input type = 

"text' 1 name = " nome" > 


Para melhorar a aces sibil id ad e dos documentos HTML, os rotulos devem ser explicitamente as- 
sociados aos carnpos dos formularies. Para estabelecer esse vinculo, o primeiro passo e identificar 
os campos atraves do atributo id. O segundo passo e definir o atributo for do elemento label com o 
identificador do campo corresponded ao rotulo. 

1 <label [f or = " nonne_id ,r ;>Monte : </Iabel> 

2 <input type = n text'' name = l? nome 11 [id = ''d f ] > 


Nome: 


FI gum 2.50: Rondos 


Placeholders 

Como vimos, os rotulos sao utilizados para informar aos usuarios quais dados devem ser preen- 
chidos nos forrnularios. Alem dos rotulos, podemos utilizar placeholders para dar dicas ou exemplos 
do conteudo que desejamos em cada caixa de entrada. Um placeholder e criado atraves do atributo 

placeholder do elemento input. 

1 clabel for= " nome_id " >Nome : </label> 

2 <input id =" nome_id" ty pe = <l text rJ name = Jl nome " placeholder^' Di gite o seu nome aqui JI > 


Nome: [otgEta oseu name 


Figura 2.51: Placeholder 


1 dabel for = pr nome_id " >Nome : </label> 

2 <input id = IJ none.id n type = ll text" name = Jl nome " placeholder = " Rafael Cosentino''> 


Nome: I Rafael Cosentiio 


Figura 2.52: Placeholder 


Botoes de submit 

Para adicionar um botao de submit em um formulario, podemos utilizar o elemento input corn 
type igual a submit. Esse tipo de botao envia os dados do formulario para o Web Server. Os textos 
desses botoes sao definidos corn o atributo value. 


1 I < input id = |J botao id " |type = ' ?ubn: t " | |value= " enviar r 'j> 
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enviar 


Figura 2.53: Bo toes de submit 


Outra foima de adicionar um botao de submit em um docuniento HTML e utilizar o elemento 
button com type igual a submit, Diferentemente do elemento input, o elemento button permite a 
cria^ao de botoes com imagens alem de texto. 

1 

2 

3 

4 


<button id = ' r botao_id " type = " submit 11 > 
Enviar 

<img src = " submit , png" alt = " Enviar ,r > 
</button> 


Enviar - 


Figura 2.54 ; Botoes de submit 



Exercicios de Fixa9ao 


Q Se voce estiver utilizando o Ub until, crie um arquivo chamado parametros.php no projeto html 
em Site Root, 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 


<!DGCTYPE html> 

<html lang = " pt -br' 1 > 

<head> 

<meta http-equiv = ' r Content-Type p content=" test/html ; char set = UTF-B J| > 

<title>Parametros</title> 

</ head> 

<body> 

<h1>Paramet ros</h1> 

<?php 

Sparams = file_get_contents( r php://input ' ) . 'Si’ , $_SERVER[ f QUERY_STRING r ]; 
Sparams = explode ('fi 1 , Sparams); 

echo f <ul>’; 

foreach (Sparams as $param) { 
if ( ! empty (Spararn)} { 
echo ’ <li>’; 
echo urldecode(Sparam); 
echo *</1i> '; 

} 

1 

echo 1 </ul> ' ; 

?> 

</body> 

</html> 


Codigo HTML 2.93: parametros.php 


Se voce estiver utilizando o Windows, crie um arquivo chamado parametros.asp no projeto html 
em Site Root, 
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1 

<!DQCT YPE html> 

2 

<html lang="pt-br "> 

3 

<head> 

4 

<meta http-equiv=" Content-Type" content^ 1 ' text/html ; charset=UTF-8 J| > 

5 

<title>Parametros</t itle> 

6 

</head> 

7 

<body> 

8 

<hl>Paramet ros</h1> 

9 

<ul> 

10 

<% 

11 

dim Params f ArrayOfParams 

12 

If Request . Form <> "'' And Request. Query St ring <> " " Then 

13 

Params = Request.Form & "ft" & Request.QueryString 

14 

Elself Request . Form <> " ,J Then 

15 

Params = Request,Form 

16 

Else 

17 

Params = Request.QueryString 

IS 

End If 

19 


20 

ArrayOfParams = Split (Params „ IJ a |J ) 

21 


22 

For Each Param In ArrayOfParams 

23 

Response.Write ("<11 >") 

24 

Response.Write(Param) 

25 

Response ,Write( JI </li>") 

26 

Next 

27 


28 

</ul> 

29 

</body> 

30 

</html> 


Codigo HTML 2,94: parametros.asp 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02-htinl-fixacaci67,zip 


© Crie urn arquivo chamado formulario-basico,html no projeto html em Site Root com o seguinte 
conteudo. 


1 

<!DOCTfPE html> 

2 

<html lang="pt -br" > 

3 

<head> 

4 

<meta http-equiv = "Content-Type n ' content = u text/html ; charset = UTF-8" > 

5 

<title>Exercicio de formulario basico</1itie> 

6 

</head> 

7 

<body> 

3 

<form action-"parametros . php" method = JI post "> 

9 

<label for = " nome_id" >Nome: </Iabel> 

10 

1 1 

<input id = "nome_id IJ type="text” name="nome n placeholder^" Seu nome JI > 

1 1 

12 

<label f or= ,r estado_id ">Estado : </label> 

13 

<input id = '' estado_i d |J type="text r name = " estado " placeholder- " Seu estado"> 

14 


15 

<input type = "submit " value="Enviar"> 

16 

</form> 

17 

</body> 

IS 

</html> 


Codigo HTML2.95: formulajio-basico.html 



Importante 

No Windows, altere o codigo acima substituindo o trecho “parametros.php” pelo 
trecho "parametros.asp 11 . 
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Al'CJUiVO: https://github.con/Kt9/Kl9-EKercicios/archive/k02-html-fixacao68,zip 


© No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/html/public_html/fonnulario-basico.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http: //localhost/~<USUARIO/html/public_html/formulario-basico. html. 

Utilize o Chrome DevTools ou o Firebug para verificar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha aiguma duvida. 


Caixas de entrada especfficas 


As caixas de texto sao componentes muito genericos. Antes do HTML5, informagoes de natureza 
bem distint as eram obtidas atraves desses componentes. Para meihorar a semantic a dos documen- 
tos HTML, tipos especificos de caixas foram adlcionados no HTML5. 


Caixas de busca 

Assim coino as caixas de texto, as caixas de busca sao adicionadas nos formulario com o elemento 
input. A diferenca e que o valor do atributo type deve ser search ao inves de text. 

1 I < input id-" keywords_id name='' keywords 17 [type = ''TeaTclT^ 1 


As caixas de busca devem ser utilizadas para coletar palavras chave que serao utilizadas em ab 
gum tipo de pesquisa. A principle nao ha nenhuma diferenga pratica entre as caixas de texto e as 
caixas de busca. Contudo, essa diferenciagao adiciona valor semantico aos documentos HTML e 
possibilita, por exemplo, que os navegadores diferenciem visualmente esses dois tipos de caixas. 


Busca: 


Figura 2.55: Caixas de busca 


Caixas de ndmeros 


Para coletar dados numericos, podemos utilizar caixas especificas para numeros. No HTML5, M 
dols tipos de caixas para esse propostto. Os dois sao definidos com o elemento input. O valor do 
atributo type e number para o primeiro tipo e range para o segundo tipo. 


1 

< input 

ld = 

” numerol_id J| name = " numerol " 

[type = 1 

'number n ] 

2 

< input 

ld = 

"n.umero2_id ,r name-" nuniero2" 

[type = ‘ 

'range p 


Esses dois tipos de componentes devem ser utilizados para coletar valores de sequencias nu- 
mericas pre-definidas. A principal diferenca entre eles e que o primeiro ftype=mimber] deve ofe- 
recer urn mecanismo preciso para os usuarios selecionarem o valor desejado enquanto o segundo 
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(type=range) nao possui essa obriga^ao. A irnagem a seguir mostra uma possivel forma dos navega- 
dores exibirem essas caixas. 



Figura 2.56: Caixas de n inner os 


Para definir a sequencia dos numeros que podem ser selecionados pelos usuarios, podemos uti- 
lizar os atributos min, max e step, Por exemplo, para coletar um numero da sequencia {0; 0,2; 0,4; 
0,6; 0,8; 1}, os valores dos atributos min, max e step devein ser 0,1 e 0.2 respectivamente. 


1 <input id- 11 numerol_id Jl type=" number " name- * 1 2 3 ' numero 1 " [mT 

2 <input id = "nunero2_id" type=” range" name^ 1 numero2 Jl [min 


= " 0 ''| 'irTax = ' I ' ] ;step = " 0.2 '} > 

0 ,r | jma x = " l ' ' (s t e p = ";}, 2 "]> 


Caixas de email, telefone e url 


No HTML5 foram definidas caixas de entradas esperificas para emails, teiefones e urls. Essas 
caixas sao adicionadas com o elemento input. O valor do atributo type deve ser email, tel e url para 
emails, teiefones e urls respectivamente. 

1 < input id = 1,1 ernail_id " name = B email''' [ty pe= ' r emai 1 Ir |> 

2 <input id = r ' telef one_i d'' name = '' telefone 1 ’' [type = ”te l lf 

3 <input id = r,l url_id'' name = "url'' [type = ,f url 


A usabilldade das paginas web melhora corn a utilizagao dessas caixas, Por exemplo, a configu- 
ra^ao do teclado dos celulares ou tablets pode ser alterada de acordo com o tipo de caixa de entrada. 
Nas caixas de email, o caractere pode ser adicionado ao teclado, Nas caixas de telefone, o teclado 
nao precisa conter as letras do alfabeto, Nas caixas de url, teclas especiais como ".com” ou “www" 
podem ser adicionadas ao teclado. 
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192.16M.11fi/~kieizG/ti-tnnl/put Qf f[T] 


E-mail: j 

Tdefone: 
Site: | 

Enviar 


192.16fl.l_l 1 S/'keizo/htinl/put C lQ 


E-mail: j~~ 
Tel efone: 
Site: I 
enviar 


qwe r I y u i o p I 1 


O zxcv bnm 

?1Z3 (<j) 


1 

2 ABC 

3 UE F 

- 

4 GHI 

5 JKL 

6 mno 

. 


7 fans 

8 TUV 

9 wxyz 

Cl 

* # 

0 + 


Avan$ar 


192.163.1.11 S/~kei 2 D/html/pufc C? IQ 


E-mail: | 
Telefone: 
Site: r 


Erwiar 



Figum 2.57: Caixas de email telefone e mi 


Caixas de datas e horas 

Diverses tipos de caixas de entmda para coietar datas e horas foram adicionados no HTML5. 
Todas essas caixas sao adicionadas com o elemento input e o valor do atributo type desse elemento 
assumira um dos valores listados a seguir. 

* date: Utilizado para coietar data (dia, mes e ano) sem fuso horario. 

* datetime: Utilizado para coietar data (dia, mes e ano) e bora (bora, minuto, segundo e fragao 
de segundo) com fuso horario em UTC. 

* datetime-local: Utilizado para coietar data (dia, mes e ano) e bora (bora, minuto, segundo e 
fragao de segundo) sem fuso horario, 

* month: Utilizado para coietar data composta por mes e ano sem fuso horario. 

* time: Utilizado para coietar bora (hora, minuto, segundo e fracao de segundo) sem fuso hora¬ 
rio. 

* week: Utilizado para coietar data composta por s email a e ano sem fuso horario. 


A criagao desses componentes permite que os navegadores melhorem a usabilidade das paginas 
web. A forma de exibigao das caixas de datas e horas pode facilitar o processo de preenchimento 
dos formularios. Inclusive, os navegadores podern exibir esses componentes de formas diferentes de 
acordo com o dispositivo (computador, celular, tablet, entre outros). 


1 

2 

3 

4 

5 

6 


< input id = " data_id" name = " data 1 ' ftype = * *' date '") > 

<input id = 11 data_hqra_f uso_i d u name -' 1 data - h ora - fuso B [type= ''datetime r '] > 
<input id = " data_hora_id Jl name = "data - hora" ftype = "datetime - local ^ 

< input id="mes_id" narme = M mes" [type ='' month ,r [> 

<input id = ,J hora_id" name = , ‘ hora " 1 ftype = ,r time r, f> 

< input id = w semana_id r ' name = " s&mana ftype = ,r week r '| > 
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mm/dd/yyyy : t Enviar 


September 2013 ▼ 


Sun 

Mon 

Tue 

Wed 

Thu 

Fri 

Sat 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 

29 

30 


2 


4 

5 


|nmydd/yyyY -- i— — ; t| Enviar 


September 2013 ^ 


Sun 

Mon 

Tue 

Wed 

Thu 

Fri 

Sat 

1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 

29 

30 


2 

3 




Figum 2.58: date e date-time-focal 


. : * Enviar 

September 2013 T 

Sun Mon Tue Wed Thu Fri Sat 

1 2 3 4 5 6 7 

8 9 10 11 12 13 14 

IS 16 17 18 19 20 21 

22 23 24 25 26 27 28 

29 30 


Figum 2.59: week e menth 


week - ; t Enviar 


September 2013 ▼ 


Week 

Sun 

Mon 

Tue 

Wed 

Thu 

Fri 

Sat 

36 

1 

2 

3 

4 

5 

6 

7 

37 

8 

9 

10 

11 

12 

13 

14 

38 

15 

16 

17 

18 

19 

20 

21 

39 

22 

23 

|~24] 

25 

26 

27 

28 

40 

29 

30 

1 

2 

3 


5 


12 : 11 PM ; 

_ 


Enviar 


Figum 2.60: time 


Calxas de senha 

As seiihas devem ser coletadas com caixas especificas para esse tipo de informaqao, Para adicio- 
nar uma caixa de senha em urn formulario, devemos ntilizar o elemento input com o valor password 
para o atributo type. Normalmente, os navegadores utilizam simbolos como o asterisco ou o rirculo 
para omitir o eonteudo das caixas de senha. 

1 <input i d- 1 ' senha_id " name = u senha ” [t y pe = " pass word "]> 


Senha: 


Figum 2 6i: Caixa de senha 


Calxas de texto longo 

Para cole tar um texto com varias linhas, podemos ntilizar o elemento text are a. A quantidade de 
linhas de um textarea e definida com o atributo rows e a quantidade de colunas com o atributo cols. 
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Esse elemento tambem possui o atributo name que funciona como no elemento input. 


1 

2 
3 


Podemos definir o limite de caracteres que podem ser inseridos no conteudo do elemento texta- 
rea atraves do atributo maxlength. 


1 

2 
3 




Texto: 






Figura 2.62: Caixa de texto longo 


<textarea id = " !nensagern_id ' r name = |J mensagem" fma%length = 1 40 ^ 
</ textarea> 


<textarea id= "mensagem_id" name=''inensageni'' [.rows = ri b f '| jcols = ,r 5 0 r '[ > 
</ textarea> 



Exerclcios de Flxa^ao 


0 Crle um arquivo chamado formulario-caixas-especiftcas.html no projeto html em Site Root 
com o seguinte conteudo. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 


<!DQCTYPE html> 

<html lang = ' r pt-br "> 

<head> 

<meta http-equiv=" Content-Type" content^ 1 ' text/html ; charset=UTF-S " > 
<title>Exercicio de formulario com caixas especificas</title> 

</ head> 

<body> 

<form ac tion=" paramet ros , php 11 method = *' post rt > 

<Iabel for = "keywords_id" >Busca: </label> 
cinput 

id = " keywords_id J| 
type = "search " 
name-" keywords" 
placeholder^' Keywords " > 

<br> 

clabel for = "idade_id ">Idade: </label> 

<input 

id = ’ r idade_id " 
type = ' r n umber " 
name=" idade" 
mi n- n 13 ,r 
ma x = " 6 0 " > 

<br> 

<label for= ,r curtiLi_id ">Curtiu : </label> 

<input 

id = ' r curtiu_id J| 
type=" range " 
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32 

33 

34 

35 

36 

37 

33 

39 

40 

41 

42 

43 

44 

45 

46 

47 

43 

49 

50 

51 

52 

53 

54 

55 

56 

57 

58 

59 

60 

61 

62 

63 

64 

65 

66 

67 

63 

69 

70 

71 

72 

73 

74 

75 

76 

77 

78 

79 

80 

31 

32 

33 

34 

35 

86 

37 

33 

39 

90 

91 

92 

93 

94 

95 

96 

97 

98 

99 

100 

101 

93 


98 




naitie^ 1 ' cu rtiu " 
min = "0" 
rita x = " 1 0 Jl > 

<br> 

clabel for = "ejnail_id ">Emai 1: </label> 

< input 

id = "email_id" 
type=" email ' r 
name = '' email " 

placeholder^' Seu email "> 

<br> 

clabel for = '' telefone_id " >Telefone : </label> 

< input 

id=' r telefone_id" 
type = ' r tel'" 
name^' telef one " 
placeholder^ "Seu telefone"> 

<br> 

<label for = ,r site_id " >Site : </label> 

<input 

id = " s ite_id " 
type = '' url'' 
name = '' site " 

placeholder- 1 ' Seu site"> 

<br> 

<label for = '‘ nasc imento_id" >Nascimento : </label> 

< input 

id = ,r nasc i merit o_id " 

type=" date " 

name = ' r nasc i men to "> 

<br> 

clabel for = '‘ festa_aniversario_id">Festa de Aniversario: </label> 

<input 

id = ' r f esta_an iversar io_id l! ‘ 
type = " datet ime - local r ' 
name = '' f esta_an i versa rio J| > 

cbr> 

<label for = '' proxi mo_carnaval_mes_ id'' >Mes do proximo Carnaval : </label> 
<input 

id = " proximo_carnaval_mes_id J| 
type=" month 11 

name=" proximo_carnaval_mes "> 

<br> 

<label f or = J| semana_rock_,in_r io_ id " >Semana do Rock in Rio: </label> 

< input 

id = " semana_rock_in_rio_id'' 
type = '' week" 

name = "semana_rock_in_rio "> 

<br> 

<label for-" horario_de_entrada_id'' >Horario de entrada; </label> 

< input 

id = ,r horario_de_entrada_id ” 
type = ' r time * 

name = ' r horar io_de_en trad a "> 
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102 

103 

104 

105 

106 
107 
IQS 

109 

110 
111 
112 

113 

114 

115 

116 

117 

118 

119 

120 
121 
122 

123 

124 

125 

126 
127 


<br> 

<label f or=" senha_id ">5enha: </label> 

<input 

id = " senha_id " 
type = " password" 
name= " senha " 

placeholder^" Sua se.nha rJ > 

<br> 

<label for = ''mensagem_id " >Mensagent: </label> 
<textarea 

id = J| mensagem_iid J| 
name = " mensagem" 
rows = " 5" 
cols = ' r 50" 

maxlengt h = " 150 "></ text area > 

<br> 

<input type = " submi t ,r value = "Enviar l, > 

</form> 

</body> 

</ html> 


Cadigo HTML 2.104: formtilerio-caixas-especificas.html 



Important^ 

No Windows, altere o codigo acima substituindo o trecho l< parametros*php' f pelo 
trecho “parametros.asp” 


Arqilivo: https://github.com/K19/K19-Exercicios/archive/k02-html-fixacao70.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


h ttp \N localhost/html/publicjitml/formulario-caixas-especificas.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http: /,Hocalhost/~<U5UARIGi>/html/pLiblic_html/f ormulario-caixas-especificas.html. 


Utilize o Chrome DevTooIs ou o Firebug para verificar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha alguma duvida. 


*!§ Checkboxes e Radios 


Para adicionar um checkbox em um formulario, devemos utilizar o elemento input coni type 
igual a checkbox, Ao utilizar esse componente, e importante definir uni valor para o atributo value. 
No envio do for mulario, esse valor e transmitido ao Web Server se o checkbox correspondente e stiver 
marcado. 


1 I < input id = " sim id " name = " newsletter Jt [type = r! checkbox ' r | [value= ' r sim ir ^ 
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Eventualmente e interessante agrupar um determinado conjunto de checkboxes. For exemplo, 
considere um formulario que coleta as linguagens de programacao que os usuarios conhecem. Para 
cada linguagem, podemos definir um clieckbox. Para agrupar esses checkboxes, basta definlr o atri- 
buto name com o mesmo valor para eles. 

1 

2 

3 

4 

5 


<input id= "java_id" type-" checkbox ,J value= '' java " [name = '' 2 i ng u age r -.s "J> 

< input id = " c sharp_i d " type = ?l checkbox " value-" cs harp J| [name = N linguagens Ir fr 

< input id=" php_id " type=" checkbox " value="php" [name = 1 linguagens '] > 

<input id= w ruby_id" type = ,r checkbox" va 1 ue = "r u by ,r friante — " 11 n g ii ag'e ns 1 ^ 
<input id=”perl_id" type = ,r checkbox 11 value-" perl" [name-’" linguagens "] > 


i/J Java m Ctf L PHP 0 Ruby L J Perl 


Figura 2,63: Checkboxes 


Para adicionar um radio em um formulario, devemos utilizer o elemento input com type igual a 
radio. Ao utilizer esse componente, e important^ definir um valor para o atributo value. No envio 
do formulario, esse valor e transmitido ao Web Server se o radio correspondente estiver marc ado. 

1 < input id="jnasculino id J| name = " sexo JI [type= FI radio fl ] [value = •'mas cu lino r '|> 


Eventualmente e interessante agrupar um determinado conjunto de radios. Por exemplo, consi¬ 
dere um formulario que coleta o time preferido dos usuarios. Para cada time, podemos definir um 
radio. Para agrupar esses radios, basta definir o atributo name com o mesmo valor para eles. 

1 

2 

3 

4 

5 


<input id =" sp_id " type = J ' radio J| value=" sao-paulo ” [name - tiine-preferido 7F j> _ 

<input id =" barcelona_id'' type = " radio'' value = |J barcelona'' [name = ,r time - pref eri do r 'k 

< input id = " mi lan_id " type= H radio" value=" milan" [name = Ir time - prefer i do r, ]> 

< input id="mu_id" type = " radio" value = " mane he s ter -united " [name = 'Tune - prefer i do ,r f> 

< input id =" bdm_id " type-" radio" value-" bayern-de-muni que " fn a me = " t i nr e - p r e f e r id d 


■t Sao Paulo Barcelona Milan Manchester United Bayern dc Muniquc 


Ft gum 2.64: Radios 


Por padrao, quando um formulario e exibido para os usuarios, os checkboxes e os radios nao es- 
tao marcados. Algumas vezes, desejamos que determinados checkboxes e radios estejam marcados 
quando os formularios sao apresentados aos usuarios. Para resolver esse problem a, podemos titilizar 
o atributo checked do elemento input. Esse atributo nao precis a de valor. 

1 <input id-"java_id" type = ,, checkbox" value-" java" name= "linguagens " [checked] :* 


1 I < input id =" sp id " type=" radio J| name = H time- preferido " value = '' sao - paulo " [check ed|> 


Selegao de cores 


No HTML5, para coletar uma cor, podemos utilizar o elemento input com type igual a color. 


100 


www.k19.com.br ■ KIS 











































101 


HTML 


1 I< input id = |J cor_id" name = "co r " ftype = “ co 1 o r '" > 



Figu ra 2.65: Sete$aa de cores 



Exercicios de Fixa^ao 


@ Crie uni arquivo chamado dieckboxes.html no projeto html em Site Root com o seguinte con- 
teudo. 


<!DOCTYPE html> 

<htnil l'ang = H pt -br"> 

<head> 

<meta http-equiv = JI Content-Type " content^" test/html ; charset=UTF -B" > 
<title>Exercicio de checkboxes^title> 


6 

</head> 





7 

<body> 





3 

<form act iort = " par a met res . php '* met. hod = 

"post w > 


9 

<label 

for-" j ava_id 

" >Java</label> 



10 

11 

12 

<input 

id = " ja va_id lp 

type- 1 ' checkbox IJ 

value= H java" 

name^ 1 ' linguagens 11 checked> 

<label 

f or="csharp_ 

id *' >C#</label> 



13 

cinput 

id =l,, csharp_id ,p type = " checkbox" value= |J c sharp Jr name = lp li nguagens " > 

14 






15 

<label 

for = " php_id rp 

>FHP</label> 



16 

17 

18 

<input 

id - " php_id" 

type = " checkbox Jl 

value = pl php" name = |J linguagens " > 

<label 

for- pr ruby_id 

J| >Ruby</ label > 



13 

< input 

id-" ruby_id" 

type=" checkbox u 

Value-" ruby" 

n>ame=" 11 nguagens" checked> 

20 






21 

<label 

for="perl_id 

J| >Perl</ label > 



22 

<input 

id= p perl_id 1 '' 

type = J| checkbox" 

value=” perl Jr 

name=" linguagens" > 

23 






24 

<input 

type-" submit 

" value = ' r Enviar" 

> 


25 

</form> 





26 

</body> 





27 

</htmI> 






Codigo HTML 2J12: checkboxes, html 
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Importante 

No Windows, altere o codigo acini a substituindo o trecho £< parametros*php f pelo 
trecho “parametros.asp" 


ArCjUiVO: https://github.ccm/KIS/KI9-Exercicios/archive/kQ2-html-fixacao72,zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/htiiil/public_htiiil /checkboxes.html. 


No Ubuntu, utilize o Chrome para acessar o endereqo: 


h 11 p://loca 1h ost/ ~< USUAR I0> / h t ml /put 1 i c_ht ml /chec k b oxes.html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha alguma duvida. 


Crie um arquivo chamado radios, html no projeto html em Site Root com o seguinte conteudo. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 


<!DOCTYPE html> 

<html lang = ' r pt -br' 1 > 

<head> 

<meta http-equiv=" Content-Type * content-" text/html ; ch,arset = UTF-6 " > 

<title>Exercicio de radios</title? 

</head? 

<body? 

<form act ion = ' r parametros , php 11 method = JI post ”? 

<label for = " sp._id " ?Sao Paulo</label? 

<input id=*sp_id" type^ 1 radio 1,1 value = " sao -paulo Jl name =,p time-preferido" checked? 
<label f or = " barcelona_i d '' ?Barcelona</label> 

< input id- 1 ' barce!ona_id ' r type-" radio w value= u barcelana N name= " t irne - pref erido n > 

< lab el for = ''milan_id "?Milan</ label > 

<input id="milan_id <r type= l * radio " value = "milan" n a me = 1,1 time -prefer id o '*> 

<label for = JI mu_id '' ?Manchester United</label? 

<input id="inu_id" type="radio" value= " nranchester-united " name—" time - pref erido Ir > 
<label for = w bdm_id N ?Bayern, de Munique</label? 

<input id= 11 bdm_id Jl type^ 1 ' radio 1,1 value= u bayern - muni que J| name = r ' time- pref erido "> 

<input type = p submi t lr value = J| Enviar "> 

</form? 

</body> 

</html? 


Codigo HTML 2J13: radios.html 



Importante 

No Windows, altere o codigo acini a substituindo o trecho £< parametros*php' f pelo 
trecho “parametros*asp". 


Arquivo: https://github.com/K19/K19-£xercicios/archive/k02-html-fixacao74.zip 
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© No Windows, utilize o Chrome para acessar o enderego: 


h ttp://loca 1 host/html/pufolic_html/radios . html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


http: //localhost/~<USUARIG>/html/public_html/radios. html. 


Utilize o Chrome DevTooIs ou o Firebug para verificar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha alguma duvida. 


@ Crie um arquivo chain ado selecao-cores*html no projeto html ern Site Root com o seguinte 
conteudo. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 


< ! DGCTTPE html > 

<html lang = ’ r pt-br" > 

<head> 

<meta http-equiv = JI Content-Type" content^ " text/html ; charset=UTF -8" > 
<title>Exercicio de sele^ao de cores</titLe> 

</head> 

<body> 

<form action-' r paramet ros . php " met hod = JI post ”> 

<labei f or = ' r cor_id ">Cor : </label> 

<input id= p cor_id J| name="car" type = JI color Jl > 

<input type = " submi t ,r value = ''Enviar "> 

</form> 

</body> 

< / Ti tml > 


Cddigo HTML 2.114: selecac-cores.html 



Import ante 

No Windows, altere o cddigo acima substituindo o trecho “parametros.php” pelo 
trecho '‘parametros.asp” 


Arquivo: https: //github.com/KlS/KI 9-Exercicios/archive/k02-htinl-fixacao76.zip 


@ No Windows., utilize o Chrome para acessar o enderego: 


http: //localhost/html/publicjitml/selecao-cores.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost/^<USUARIO>/html/public_html/selecao-cores.html. 


Utilize o Chrome DevTooIs ou o Firebug para verificar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha alguma duvida. 


Botoes 
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Botoes generic as 

Para adicionar um botao generico em um formulario, podemos utilizar o elemento input com 
type igual a button. As a^oes desse tipo de componente sao definidas com JavaScript. Os textos 
desses botoes sao definidos com o atributo value, 

1 I < input id =" bo t ao_ id " fiyp e = *' Efutt 6ri [va'l ue =~' r 1ii o'tao~ ir |> ! 


— 

botao 


Fignw 2.86: Botoes genericos 


Outra fonna de adicionar um botao generico em um documento HTML e utilizar o elemento 
button com type igual a button. Diferentemente do elemento input, o elemento button permite a 
criagao de botoes com imagens alem de texto. 

1 

2 

3 

4 


< but ton id = ?r botao_i d n type- ,r button "> 
Botao generico 

< ifflg src="botao . png J| alt = "Botao J| > 
</but torc> 


— 

Botao generico 


Figum 2.67: Botoes genericas 


Botoes de reset 

Para adicionar um botao de reset em um formulario, podemos utilizar o elemento input com 
type igual a reset. Esse tipo de botao reinicia os dados do formulario. Os textos desses botoes sao 
definidos com o atributo value. 


1 < input id =" botao_id ” [type - ' reset ;| ] value - r ' re i nici a r “; > 


rejniciar 


Figum 2.68: Botoes de reset 


Outra forma de adicionar um botao de reset em um documento HTML e utilizar o elemento 
button com type igual a reset. Diferentemente do elemento input, o elemento button permite a 
cria^ao de botoes com imagens alem de texto. 

1 

2 

3 

4 


< but ton id = ' r botao_id n type = " reset '■ > 
Botao de reset 

<img src = " reset , png Jl alt = "Rei n iciar J| > 
</but ton> 
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Botao de reset ^ 


Figura 2.69: Botdes de reset 


Botdes de upload 

Para adicionar um botao de upload em um formulario, podemos utilizar o elemento input com 
type igual a file. Esse tipo de botao permite selecionar um arquivo para um eventual upload. O 
formulario que contem esse botao deve possuir o atributo enctype com o valor multipart /form- 
data. 

1 I < input id = r ' botao_id " name = f i le J| [type = r ' f i Is ,r f> 


! CJioo&e Tile No file chosen 


Figura 2.70: Botdes de upload 


Imagem como botao de submit 

Uma imagem pode funcionar como um botao de submit. Para isso, devemos utilizar o elemento 
input com type igual a image. O caminho absolute ou relative da imagem que sera utilizada deve 
ser definida corn o atributo sre, Um texto alternativo deve ser definido com o atributo alt. Esse texto 
pode ser utilizado caso ocorra aigurn problema no carregamento da imagem. 

1 

2 
3 


cform act ion^ 1 2 3 4 5 6 7 paramet ros , php" method = " post B enctype= H mult i part / form-data "> 
<input id=" botao_id" [ait = " enviar'''] ^type= lf image " ] [src= " submit, png 
</form> 



Figura 2.71: Imagem como botao de submit 



Exercicios de Fixa?ao 


0 Crie um arquivo chamado botoes.html no projeto html em Site Root com o seguinte conteiido. 


1 <!DOCTYPE html > 

2 <html lang = ,r pt-br"> 

3 <head> 

4 <meta http-equiv = ,r Content-Type " content^ 1 ' text /html ; char set = UlT -B JI > 

5 <title>Exerc icio de checkboxes</title> 

6 </head> 

7 <body> 

3 <form action- "paramet ros . php" Hiethod- ,r post " enctype-" multi part/form-data "> 
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9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 

31 


<input id=" f ile_id " type="file" name-"f ile "> 

<input id="bV type= M button Jl value="Botao genericQ l '> 

< but ton id = ,r b2" type = ''butt on "> 

Botao generico 

< img src = ' r http : //www . kl 9 . com . br / figs/ botao - gene rico .png" alt = " Botao" > 
</button> 

<input id= l!, b3" type = 1 ’ reset" value-" Reinici ar u > 

< but ton id = pr b4 rp type=" reset" > 

Botao de reset 

< img src = " http : // www , kl 9 . com . br / f igs/botao - reset . png * alt-" Reiniciar "> 
</but ton> 

<input id=”b5" 
type= "image" 
alt-" env iar " 

src = lp http : / / www . k 1 9 . com . br / f igs / submit . png IJ > 

</form> 

</body> 

</html> 


Codigo HTML 2.121: botoes.html 



Importante 

No Windows, altere o codigo aciraa substituindo o trecho “parametros^php" pelo 
trecho “parametros.asp" 


Arquiuo: https://github.com/KI9/K19-Exercicios/archive/k02-html-fixacao78 J zip 


© No Windows^ utilize o Chrome para acessar o enderego: 


http://1 oca 1 hos t/html/publi c_htm 1 /botoes . html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localho5t/~<USUARIO>/html/public_html/botoes.html. 

Utilize o Chrome DevTooIs ou o Firebug para verificar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha alguma duvida. 


Drop-down list 


Muitos formularios permitem que os usuarios selecionem um ou mais itens de tuna lista de op- 
goes. Essa selegao pode ser realizada atraves de um drop-down list. Para adicionar esse tipo de com- 
ponente, devemos utilizar o elemento select. Normalmente, o select e defmido pelos navegadores 
co mo inline-level element. 


1 

2 
3 


<select id = pr estados_id 1 '' name = "estado rJ > 
</select > 
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As opgoes devem ser definidas no contend© do eiemento select e elas sao adicionadas com o ele- 
mento option, O conteudo do eiemento option e exibido para os usuarios. Esse eiemento possui um 
atributo c ham ado value. Quando o formal ario for enviado, o valor do atributo value e transmit id o 
ao Web Server se a op^ao c orre spoil dent e foi selecionada pelo usuario. Se esse atributo nao estiver 
definido, o conteudo do eiemento option e transmitido ao Web Server se a opgao correspondente foi 
selecionada pelo usuario. 


1 

<select id = "estados_id' J name= "estado |J > 

2 

<opt ion value=" SP" >Sao Paulo</opt i on> 

3 

<option value= |J RJ'' >Rio de Janeiro<7 option> 

4 

<option value= ''RS " >Rio Grande do Sul</option> 

5 

<option value= ''RN " >Rio Grande do Norte</option> 

6 

</select > 



Figura 2.72: Drop-down list 


Por padrao, apenas um item de um drop-down list pode ser selecionado pelos usuarios. Mas, 
utilizando o atributo multiple* um ou mais itens podem ser selecionados. Geralmente* mantendo a 
tecla CTRL pressionada, os usuarios poderao escollier dois ou mals Itens. 

1 

2 

3 

4 

5 

6 
7 
3 


<select id = "estados_id" name = "estado'' [multiple = "multiple *■ > 
<option value= u SP" >Sao Paulo</oplion> 

<option value = w RJ ,l >Rio de Janeiro</option> 

<option value = l, RS' r >Rio Grande do Sul</option> 

< opt ion value= " PR "> Par ana </ option> 

<option value= "RM JI >Rio Grande do Norte</option> 

< opt ion value = " BA Jl >Etahia</opt ion> 

</select > 


— 

Paulo 

Rio de Janeiro 
Rio Grande do Sul 
Parana 


Figura 2.73: Drop-down list 


Nos drop-down lists com muitas op^oes, e interessante agrupar as opgoes em categorias. Esse 
agrupamento pode ser realizado com o eiemento optgroup. Esse eiemento possui um atributo cha- 
mado label. O valor desse atributo e exibido no drop-down list. 

1 < select id = 11 est ados_i d'' name = " es tado 1,1 > 

2 f< opt group label - " Reg iao Sudeste">; 
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3 

4 

5 

6 
7 
3 
3 

10 

11 

12 

13 

14 


<option value= " SP " >Sao Paulo</option> 

<option value = 1,1 RJ" >Rio de Janeiro</option> 
</optgroup> 

[< opt group label = *' Re giao Sul ir >] 

<option value = " RS " >Rio Grande do Sul</option> 
<option value = " PR " >Parana</opt ion> 

</optgroup> 

f< opt group 1 abel-' Regiao Norcksie'V 

<option value = '' RN " >Rio Grande do Nor te</opt i on> 
< opt ion valuer "BA 11 >Bahia</option> 

</optgroup> 


5ao Paulo 

Regiia Sudeste 


/ Sac Paulo 


Rio de Janeiro 
Regi lo Sul 

Rio Grande do Sul 
Parana 

Ftegiio N'ordute 

Rio Grande do Norte 
Bahia 


Figum 2.74: Drop-down list 


Drop-down list com itens pr^-selecionados 

Quando um drop-down list e exibido para os usuarios, opgoes podera estar por padrao seleciona- 
das. O atributo selected do elemento option define as opcoes que devem estar selecionadas quando 
um drop-down list e exibido para os usuarios. Esse atributo nao precisa de valor 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 


<select id = "estados_id™ name = JI estado" multiple^' 1 multiple "> 
<optgroup label= "Regiao Sudeste"> 

<option value = ” SP' r [selected|>Sao Paulo</option> 

<option value= "RJ" >Rio de Janeiro </ option> 

</optgroup> 

<optgroup label= "Regiao Sul"> 

<option value^RS" [selected| >Rio Grande do Sul</option> 
< opt ion value= |J PR J| > Par ana </opt ion > 

</optgroup> 

<optgroup label = r 'Regiao Nordeste IJ > 

<option value = |J RN" >Rio Grande do Norte</option> 

<option value = '■ BA JI >Bahia</opt i on> 

</optgroup> 



Exerclcios de Fixa^ao 


Q Crie um arquivo chamado drop-down-list.html no projeto html em Site Root com o seguinte 
conteudo. 


1 <!DOCTYPE html> 

2 <html lane = ' r pt-br''> 
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3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 


<head> 

<meta http-equiv = ' r Content-Type" content-™ text/html ; charset=UTF-8" > 
<title>Exercicio de checkboxes</title> 

</head> 

<body> 

<form act ion = JI par a met ros . php H method = ,r post "> 

<select ld- w est3dos_id" name— "estados" multiple^™ multiple "> 
Coption value= "SP" >Sao Paulo</option> 

<option value= rJ R J J| >Rio de Janeiro</option> 

<option value= "RS" >Rio Grande do Sul</option> 

<opt ion value= IJ PR Jl >Parana</ opt ion> 

<option value= |J RN J| >Rio Grande do Norte</option> 

< opt ion value= "BA' 1 > Bahia </ opt ion > 

</select > 

<select id = ' r estado_id " naroe= " estado ■" > 

<optgroup label=”RegiaQ Sudeste"> 

Coption value = ™ SP lf >Sao PauloC/option> 

<option value= " RJ">Rio de Janeiro </ option> 

</optgroup> 

coptgroup label = r 'Regiao 5ul M > 

<option value-"R5">Rio Grande do Sulc/option> 

< opt ion valuer l# PR Jl > Par ana c/opt ion> 

</opt group> 

<optgroup label = l ’Regiao Nordeste N > 

<option value= u RN J| >Rio Grande do Nortec/option> 

Coption value= "BA n > Bahia</option> 
c/oplgroup> 

</select > 

<input type = " submi t ,r value=" En viar "> 

</form> 
c/body> 
c/html> 


Codigo HTML 2.127: drop-down-list, html 



Importante 

No Windows, altere o codigo acima substituindo o trecho £< parametros*php' f pelo 
trecho l parametros.asp” 


Arcjllivo: https: //github^com/KIS/KI 9-Exercicios/archive/k02-htinl-fixacao80.zip 


O 


No Windows., utilize o Chrome para acessar o enderego: 


http: //localhost/htirl/public_html/drop-down-list. html. 


No UbuntUp utilize o Chrome para acessar o endere^o: 


http: //localhost/™<USirARI(l>/htffll/public_ht ml/drop-down-list. html. 


Utilize o Chrome DevTools ou o Firebug para verificar os parametros enviados at raves do for- 
mulario. Chame o instrutor easo tenha alguma duvida. 


Fieldset 
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Os campos de um formulario muito longo podem ser agrupados logicamente com o elemento 
fieldset. No conteudo desse elemento, podem os utilizar o elemento legend par a definir a legenda do 
fieldset. Normalmente, o fieldset e definido pelos navegadores como block-level element. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 


<fieidset> 

<legend>Dados Pessoaisc/legend> 

</fieldset > 

<fieldset> 

<1egend>Format ao<f legend> 

</fieldset > 

<fieldset> 

< leg end >E xp e rienc ia</ legend > 

</fieldset> 



Figura 2.75: Fieldset 



Exercicios de Fixa^ao 


© Crie um arquivo chamado fieldset.html no projeto html em Site Root com o seguinte conteudo. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 


< ! DQCTTPE html > 

<html lang = Jr pt-br "> 

<head> 

<meta http-equiv = J| Content-Type" content^" test/html ; charset=UTF-8 J| > 
<title>Exercicio de fieldset</title> 

</head> 

<body> 

<form act ion="parametres . php" method^'" post "> 

<fieldset> 

<legend>Dados PessoaisC/legend> 
clabel for= "nome_id" >Nome; </label> 

< input id- ” none.id " type = "text r ' name= " nome 
</fieldset > 

<fieldset> 

<legendsFormatao</legend> 

<label for=" curso_id H >Curso: </label> 

< input id= n curso_id ' r type = " text Jl name=” cur so "> 

</fieldset > 

<fieldset> 

<legend>Expe riencia</legend> 

Clabel f or= " empresa_i d r '>Empresa : </ label > 

< input id = " empresa_id " type = " text " name—" empresa "> 
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23 

24 

25 

26 
27 
23 


</fieldset> 


<input type = " submi t <r value = JI Enviar "> 
</form> 

</body> 

</html> 


Codigo HTML 2.129: fieldset html 



Importante 

No Windows, altere o codigo acima substituindo o trecho "parametros.php” pelo 
trecho "parametros.asp” 


Arcjllivo: https : //gi thub.com/K19/K19-Exercicios/archive/k02-html-fixacao82.zip 


© No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/html/public_html/fieldset.html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


http: //local host/~<USUARlO>/htifil/pyblic_htnil/f ieldset. html. 


Utilize o Chrome DevToois ou o Firebug para verlficar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha alguma duvida. 


Autocomplete 


Para melhorar a usabilidade, podemos utllizar o recur so do autocomplete nas caixas de entrada. 
Para utilizar esse recurso, devemos criar uma lista de sugestoes com o elemento datalist. E funda¬ 
mental identificar as listas de sugestoes com o atributo id. 


1 

2 
3 


<datalist id=" comidas_id "> 
</datalist > 


As opgdes devem ser definidas no conteudo do elemento datalist e elas sao adicionadas com o 
elemento option. O atributo value de um elemento option define uma sugestao, 

1 

2 

3 

4 

5 

6 


<datalist id= H comidas_id w > 
coption value-" Lasanha "> 
Caption value-" Pizza "> 

<option valuer" Sopa ”> 
<option value= "Salada" > 
</datalist > 


Com a lista de sugestoes criada, podemos associa-la a uma caixa de entrada atraves do atributo 
list do elemento input. 


<input id = |J cornida_id " name = ' r coraii da r type = '' tex t 11 fl i s t = '' c pit i d a s _ i c '"> 
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3 <datalist id="cGmidas_id"> 

4 <option value="Lasanha"> 

5 <opt ion value= p Pizza rj > 

6 <option value=" Sopa *' > 

7 <opt ion vaiue = '* Salada J| > 

8 </datalist> 


Comida: 


Sopa 

Salada 


Figum 2.76: Autocomplete 


Exercicios de Fixacao 


© Crie um arquivo chamado autocompIete.html no projeto html em Site Root com o seguirite 
conteudo. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 


<!DGCTYPE html> 

<html lang- ,f pt -br"> 

<head> 

<meta http-equiv = J| Content-Type" content-'* text/html ; charset=UTF -6" > 
<title>Exercicio de autocomplete</title> 

</head> 

<body> 

<form action = *'parametros , php " method^ 1 post "> 

<input id= "comida.id" name z '' comida" type = " text" list ='' comidas_id "> 

<datalist id = JI comidas_id '*> 

<option value- "Lasanha "> 

<option value='' Pizza "> 

<option value= "Sopa "> 

<option value= r * Salada 11 > 

</datalist> 

<input type = "sub-mit*' value = JI Enviar "> 

</ form> 

</body> 

</html> 



Codigo HTML 2.133: aulocomplete.html 



Importante 

No Windows, altere o codigo aciraa substituindo o trecho “parametros*php' f pelo 
treclio paramet ros. asp h . 


Arquivo: https://github.ctwi/KIS'/KI9-Exercicio5/archive/k02-html-fixacaoB4.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/publicjitmi/autocomplete.html. 


112 


www.kt9.com.br R <IB 
















113 


HTML 


No Ubuntu, utilize o Chrome para acessar o endere^o: 

http:/ /local host / ™< U5U AR IO> / h t m 1 / pub 1 i c_ht in 1 / au to compl et e. h tml . 

Utilize o Chrome DevToois ou o Firebug para verificar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha alguma duvida. 


Campos ou botoes desabilitados 


Eventualmente, determinados campos ou botoes de um formulario devem ser desabilitados. 
Para desabilitar um campo ou botao, podemos utilizar o atributo disabled dos elementos input, 
select, textarea e button. Esse atributo nao precisa de valor. 

1 <input id = l# nome_id u name = ,r nome" type="text" [disable^ 


Nome: Rafael Cos-entino 


Figura 2.77: Campos desabilitados 


<select id = ' r nomes_id IJ [disabled| > 
</select > 


Sao Paulo 


Figura2.78: Campos desabilitados 


1 <textarea [disable^ 

2 </textarea> 


Caixa de texto desabilitada 


J. 


Figura2.79: Campos desabilitados 


1 <button type=" button " fd i sable d| > 

2 Botao desabilitado 

3 <img src = "botao . png" ait= ,f Botao desabi 1 itado "> 

4 </button> 
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— 

Ekrtao desabilitadc A 


Fig am 2*80: Bo toes desabilitados 


Campos fixos 


Eventualmente, determinados campos de um formulario devem ser fixo h on seja, os usuarios nao 
podem alterar o conteudo, Para fixar o conteudo de um campo, podemos utilizar o atributo readonly 
dos elementos input e textarea. Esse atributo nao precisa de valor. 

1 <input id =" noine_id" name = ir nome |J type = J| text" value= IJ Marcelo Martins" |Yeadonly > 


Nome: Marcelo Martins 


Figura 2. Q1: Canipos fixos 


1 <textarea |Yeadonlyj > 

2 Gostaria de efetuar a matricula no K10 - Formagao Desenvolvedor Java. 

3 </textarea> 


Gostaria de efetuar a 
matricula no K10 - 
Formagao De sen volvedor 
Java. 


Figura 2.82; Campos fixos 



Exerclcios de Fixa^ao 


© Crie um arquivo chamado disabled-readonly.html no projeto html em Site Root com o seguinte 
conteudo. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 


<!DOCTYPE html> 

< ht m 1 lang = Jr pt-br "> 

<head> 

<meta http-equiv = J| Content-Type" content-" text/html ; charset=UTF-8 J| > 

<title>Exerc icio de autocomplete</title> 

</ head> 

<body> 

<form acti(jn = ' r paraifietros . php" method^'" post 
<label for = ''noine_id JI >Norie : </IabeI> 

<input id= "nome_id" name = JI noine" type = w text" value= "Marcelo Martins " readonly > 
<label f or = ,r email_id r '>Emai 1: </ label > 

<input id=" email_id" name= "email" type = "emai1" disabled> 
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15 

16 
17 
IS 


<input type-" submit" value=" Enviar "> 
</ for in > 

</body> 

</htmI> 


Cadi go HTML 2.140 ; disabled readonly, htm l 



Important* 

No Windows, altere o codigo acima substituindo o trecho li parametros,php' f pelo 
trecho“parametros.asp” 


Arcjllivo: https: //github.con/K 1 9/K1 S-Exercicios/archiye/kOH^htBil-fiKacaoi©.zip 




No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/public_html/disabled-readonly.html. 

No Ufountu, utilize o Chrome para acessar o endere^o: 


http://localhost/~<USUARIO>/htinl/public_htnil/disablecl-readonly. html. 

Utilize o Chrome DevTools ou o Firebug para verificar os parametros enviados atraves do for- 
mulario. Chame o instrutor caso tenha alguma duvida. 


Vaiidacao 


Alguns recursos para realizar a validagao dos campos de um forniulario forarn adicionados no 
HTML5. Essas validates ocorrem antes do envio dos formularies, Por padrao, algumas validates 
sao realizadas auto mati came rite de acordo com o tipo do campo. Por exemplo, os navegadores veri- 
fleam se o eonteudo de uma caixa de email e um email valido. 


1 <input id = "email_id Jl name = "email" type-" emai 1" > 


E-mail: xp,tp, _ invtar 

Q Please enter an email address. 


Figwa2.S3: Vaiidacao de email 


Os navegadores tambem verificam se o eonteudo de uma caixa de URL e uma url valid a. 


1 I < input id=" url_id ■' name = " url" type = ' r url" > 
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URL: x pto [ Entfiar 

Q Please enter a URL. 


Figum 2.84: Vatida^do de URL 


Outras validagoes devem ser definidas explicitamente. For exemplo, se um determinado campo 
e obrigatorio, devemos utilizar o atributo required. Esse atributo nao precisa de valor, 

1 I< input id = u name.id 1,1 name = ''Jiome r ' type = J| text'' requi red> | 


Nome: 

Envlar 


Q Pease fill out tbit field. 




Figum 2.85: Validcqdo de campo obligator so 


Se um determinado campo deve respeitar uma expressao regular, devemo utilizar o atributo pat¬ 
tern. 


1 

2 

3 

4 

5 

6 


< input 

id-'" placa_id" 
name=" placa" 
type -"text" 

pattern = "[A-Z]f3} [Q-9]{4}" 

title-"As placas sao formadas por 3 letras ou 4 numeros ,r > 


Placa XXX AAAAj Enviar 


A Please match the requested 
format. 

As platai sao formadas por 3 letras ou 

4 numeros 





Figum 2,86: Valida^do com expressao regular 


Se o conteudo de um campo numerico deve estar em um determinado intervalo, podemo utilizar 
os atributos min e max. 


1 

2 

3 

4 

5 

6 
7 


< input 

id= ,r idade_id 1,1 
naine = ,r idade" 
type="nyinber ™ 
m i n = " 1 3 " 
max = " 60 " 

titie= u A idade minima e IS e a maxima e 60"> 


116 


www.k19.com.br fl KI9 
























117 


HTML 


Idadc. 12 \ : Enviar 

Value must be greater than or 
equal to 18. 

A idade mininra e 18 e a maxima e 60 


Figum 2.87: Validagdo de numerka de minima e maxima 



Exercicios de Fixa^ao 


© Crie urn arquivo chamado vaIidacao.html no projelo html em Site Root com o seguinte con- 
teiido. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 
29 


<!DOCTYPE html> 

<h trail lang = ' r pt-br''> 

<head> 

<meta http-equiv=" Content-Type" content= "test/html ; charset=UTF-8 " > 
<title>Exercicio de validagao</title> 

</head> 

<body> 

<form act i on, = ' r paramet ros . php" method = ,r post "> 

<label for = ' r rioraie_id " >Nonte : </ label > 

<input id=" nome_id" name = "nome" type = ,r text" required> 

<label for = , 'ejnail_id H >Eraail : </label> 

<input id= " emai 1_id " name = |J email type-" einai 1 !| > 

< lab el f or="url_id ">site : </label> 

<input id= p url_id J| name = "url ni type= l, url ,, > 

<label for = ,r placa_id ">Placa : </label > 

<input 

id = "placa_id " 
name=" placa " 
type="text r ' 

pat te rn- |J [A-Z]{ 3} [0-9][4} B 

title-"As placas sao formadas por 3 letras ou 4 ntimeros‘" > 

<input type = 15 submit " value = Jl Enviar "> 

</form> 

</body> 

</html> 


Codigo HTML 2.146: validacaa. html 



Importante 

No Windows, altere o codigo acima substituindo o trecho “parametros.php" pelo 
trecho l parametros.asp” 


Arquivo: https://Eithub.com/K197K19-Exercicios/archive/k02-html-fixacaofifi.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


8KI9 www. f ac ebook. com/k 19trei nam entos 


117 















HTML 


113 


http://locallwst/html/public_html/validacao.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //local host/~<USllARIO>/htinl/public_ht]iil/vali da c ao, html, 


Utilize o Chrome DevTools ou o Firebug para verificar os parametros enviados atraves do for- 
mulario, Chaine o instrutor caso tenha algunia duvida. 


Partes de um documento HTML 


Normalmente, um documento HTML pode ser dividido ein "pedagos". For exemplo, e comum 
existir cabecalhos, rodapes e menus de navegacao na maior parte das paginas web. No HTML5, 
diversos elementos foram adicionados para definir especificamente os principals “pedagos” que ge- 
ralmente um documento HTML possuL 


header 

O elemento header e utilizado para definir urn cabegalho de um documento HTML ou de uma 
segao de um documento HTML. O objetivo desse elemento e definir um conteudo de introdugao 
on de navegagao. Normalmente, no header, encontramos os elementos hl f h2, h3 f h4, h5 e h6. 
No conteudo do header, tambem e comum encontrar sumarios, formularies de busca, logos, entre 
outros. 


1 

<body> 

2 

<header> 

3 

<h1>Blog da K19</hl> 

4 

< i mg src = "kl 9 - logo . png w alt="K19"> 

5 

<7header> 

6 


7 

<article> 

S 

<header> 

3 

<hl>Novos elementos do HTML5</h1> 

10 

<img src = ’ r htnil5 - logo , png |J alt = " HTNL5 "> 

11 

</header> 

12 


13 


14 

</article> 

15 


16 


17 

</body> 


Corfigo HTML 2.147: Exemplo de cabegalho 


footer 

O elemento footer e utilizado para definir um rodape para o documento HTML ou para uma 
segao do documento HTML. E muito comum encontrarmos em seu conteudo informagoes sob re a 
segao a qual ele pertence como quern a escreveu, links relacionados ao conteudo da segao e inf or- 
magdes legais, por exemplo, 

1 <body> 

2 

3 <article> 

4 <p>Loren ipsum...</p> 

5 
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6 <footer>Postado por: Jonas Hirata</footer> 

7 </article> 

3 

9 <footer>&copy;2013 K19 Treinamentos.</footer> 
10 </body> 


Codigo HTML 2.148: Exempli) de rodape 


nav 

O elemento nav e utilizado para definir um bloco com os principals links de um documento 
HTML. E comum, definir os principais links de um documento HTML nos rodapes. Dessa forma, o 
elemento nav aparecera com frequencla no conteudo do elemento footer. 


1 

<body> 

2 

<header> 

3 

<hl>Blog da K19</hT> 

4 


5 

<nav> 

6 

<a href = 11 # h '>home</a> 

7 

<a href=" , #">Ultimos posts</a> 

3 

<a href= H # ">Arquivo</a> 

9 

</nav> 

10 

</ header> 

11 


12 

<sectiorc> 

13 

<h1>Meus Posts</h1> 

14 


15 


16 

</section> 

17 


13 

<footer> 

19 

<p>&copy ;2013 K19 Treinamentos.</p> 

20 

<nav> 

21 

<a href = |: '# 

22 

<a href ="#">0111.1105 posts</a> 

23 

<a href="#">Arquivo</a> 

24 

</nav> 

25 

</ footer> 

26 

</body> 


Codigo HTML 2.149: Exemplo de nav 


article 

O elemento article e utilizado para definir uma composiqao independente em um documento 
HTML. A principio, um article pode ser distribuido independentemente on facilmente re utilizado. 
E apropriado utilizar esse elemento para definir urn post de um forum, um artigo de uma re vista 
ou jornal um post de um blog, um comentario enviado por um usuario, um widget interativo ou 
qualquer item independente de conteudo. 


Considere um blog no qual os usuarios podem enviar comentarios sobre os posts publicados. Os 
posts desse blog podem ser definidos com o elemento article. Os comentarios podem ser definidos 
com elementos article interims aos que definem os posts. Um elemento article dentro de outro 
elemento article deve definir algo relacionado ao conteudo do article que o content. 


1 

2 

3 

4 

5 


<body> 

<article> 

<h1>Frimeiro post do blog</hl> 
<p>Lorerii ipsum...</p> 
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6 

7 

3 

9 

10 

11 


<h2>Comentarios</ h2> 

<article>l_egal este postE </ article> 
<article>Bacana este post!</article> 
<article>Da hora este post l</ article> 
</article> 

</body> 


Codigo HTML 2.150: Exemplo de artigo 


aside 


O elemento aside e utilizado para definir algum conteudo que esteja relacionado ao conteudo 
principal, mas nao e o foco do documento HTML. Normalmente, esse elemento e exibido em uma 
coluna lateral em relagao ao conteudo principal. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 

15 


<body> 

<article> 

<h1>Novidades do HTML5</h1> 

<p>Loreni ipsum.,.</p> 

<h2>Comentarios</h2> 

<art icle >l_egal este post l </ art i cle> 
<article>Bacana este post!</article> 
<article>Da hora este post!</article> 
</article> 

<aside> 

<ht>Posts relacionados</h1> 

</aside> 

</body> 


Codigo HTML 2.151: Exemplo de aside 


section 

O elemento section e utilizado para definir uma segao generica de urn documento. Uma segao e 
o agrupamento de um conteudo dentro de um tema. Normalmente, as segoes possuem cabegalho e 
rodape. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 
19 


<body> 

<section> 

<h 1 >lllt imos Posts</h1> 

<article> 

<h1>Primeiro post do b!og</hl> 
<p>Loren ipsum... </p> 

</article> 

<article> 

<hl>5egundo post do blog</h1> 
<p>Loren ipsum... <7p> 
</article> 

<article> 

<hl>Terceiro post do blog</hl> 
<p>Lorerc ipsum...</p> 

</article> 

</sect!on> 

</body> 


Codigo HTML 2.152: Exemplo de seftfo 
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figure 


O elemento figure deve ser utllizado para definir um conteudo que e auto-suficiente e tipica- 
niente referenciado como uma uiiidade singular do fluxo principal do documento. Opcionalmente 
o conteudo pode possuir uma legenda. 

Por exemplo, esse elemento pode ser utilizado para definir ilustragoes, diagramas, fotos, videos, 
codigos fonte em um documento HTML. Normalmente, esse itens sao referenciados no conteudo 
principal mas podem ser removidos sem afetar o fluxo do documento. 


figcaption 


O elemento figcaption deve ser filho de um elemento figure. Ele e utllizado para definir a legenda 
do conteudo do elemento pai. Alem disso, o elemento figcaption deve ser o primeiro ou ultimo filho 
de um elemento figure. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 


<body> 

<h1>Novidades do HTML5</hl> 

<P> 

Loren ipsuro dolor sit amet, consectetur adipiscing elit. Vestibulun 
enim est r ultrices ac vehicula vitae f pharetra id nauris. Quisque sit 
amet nisi mollis sen fermentum accumsan, Sed sed quam nisi f cursus 
sodales metus, Curabitur dapibus, nassa sed sollicitudin viverra , odio 
justo dignissin metus, vel tempor turpis neque id erat. Aenean fermentum 
ultricies ante a luctus, 

</p> 

<f igure> 

<ing src="£" t i tle = J| Aenean ferment um rJ alt=" Mauris con vail is, leo sol lici tud i n ,r > 
<figcaption>Figura 3b. Curabitur dapibus r nassa sed sollicitudin ,.</figcaption> 
</ figure> 

<p> 

Mauris fermentum lorem nec nisi euismod elementunt. Aenean nec ritagna 
dolor, vel fermentum turpis, Mauris convallis, leo sollicitudin 
egestas nalesuada , nunc est ultrices enim, eget varius odio fells et 
velit, Sed ac lorem nibh, ut convallis ante, 

</p> 

</body > 


Cod {go HTML 2.153: Exemplo de figure e figurecaption 


8KI9 www. f ac ebook. com/k 19irei nam entos 


121 








HTML 


122 



Home 


Destaque 1 Arquivo 


Ultimos Posts 


Neque porro quisquam est qui doiorem 

Si 4 FiuJa, SP - u/li/'ioi'j - oj!45 FM 

L o re m ip sumd o lor ait amet, co nsec tetui adipiseing eMt. Da nee fai^ibus vulputate elit, sit amel venenatis 
ante lAcima eget. Ut id urna vel imm dictum elementum, Mauris rutrummagna nee erat uUamcorper 
sc ele usque. Aenedun non est lalesa. Mauris venenatis, velit quis mattis ternpus, neque eios tiistique purus, 
non pretium nisi mm At nunc. Mo ibi nec commode dui, quis vulpulale ligula. Maecenas vitae lib era a 
tuipis posueie fringilla. Pellentesque nsus iiequ£ ; . pretium vitae elementumac, ultrkes eteres. 



Eed sit arnet enim sapien. Nulla, quts lectus non ora pellentesque trishque. Dias eget uUamco rper tmpts, 
facilisis commodo nisL Aliquam rhoncus ut rue firs a vehkula. Enqiendisse pellentesque liguLa arm, in 
viveira massa rlioncus a. 


Comentirios 


Mauris Vulputate 

Vi.i'LL/iiHS - 3 Ci:i‘- AM 

Eed srt arnet enim sapien. Nulla quis lectus non o mi pellentesqiM tnstique. Duis eget 
ullamcoiper tuipis, facilisas commodo nisi ALquam. rlioncus ut metus a vehiouLa. Euspendisse 
pellentesque ligula mcu, in viveixa massa rhoncus a. 


Dftnn Tnstique 

1 i^f±Lf±Ciiiy- iJifct AM 

i Eed sit amet enim sapien. Nulla quis lectus non am pellentesque tiistique. Duis eget 
« uUamcorper tuipis, faalisis commodo msl Aliquam rhoncus ut metus a vehicula, Euspendisse 
1 pellentesque ligula arcu, in vivena massa rim ncus a. 


—. F0R __ 


CHRIS I HAS PARTY 

-- ok-- 

2S 12* *2013 at 6 pm 

—-A | —— 

rift' imijftBriiH flora. \cv ram 


Links 


it- Hi? Treinamentos 
*■ Nulla tkiuadunt tmeidunt 
* Phase lhrsulkmcorper ntbli 


Posts em Destaque 


Donee quis suscipit odio, kiq treinamentos 

Sio Paulo, SP - u/io/aoi]- 06:14 PM 

Eed at amet emm sapien. Nulla qms lectus non ora pellentesque tiistique. Dins eget ullamco iper tuipis, 
facilisis commodo nisL Aliquam rhoncus ut metus a vehicula. Euspendisse pellentesque ligula area, in 
viveira massa rhoncus a. Hulk at quam arcu. Q uisque sed erat ac ligula auctor part titer. Inteidum el 
malesuada rallies ac ante ipsum prnnis m faucibus. VestihuLum eledSend augue at ligula pa rta co nsectetur, 
Mauris a lurtus lee. C urabitur aucto 1 ahquet aiiquam 


Donee vaiius a nibh 


Donee varius a iuhh 


* Eed at amet enim sapien 

■* Nulla quis lectus non orci pellentesque tiistique 
+ Duis eget ullamcoiper tuepis, tacilisis commodo 
■* Euspendisse pellentesque ligula arcu, m wrens 

* Nulla at quam arcu 

* Quisque sed erat ac ligula auctoi po rttito 1 


Maecenas non enim vel est vo latpat 

■ Vivamus tnstique temper est, mteidum 

■ Flom id pretium telis 

■ Nulla tincidunt tmcidunt est, ac poita quam 

■ Eed ultricies justo vitae ullamcoiper puivinai 

■ Nulkm dictum in nisi mo Ha uflamcorpe r 


LJie us on 

Bookface 


Figura 2.88: Partes de urn document a HTML 
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HTML 


Normalmente, os elementos header, footer nav, header, article, aside, section, figure e figcap- 
tion sao definidos pelos navegadores como block-level elements. 


*!P Divisao de conteudo 


Muitas vezes, desejamos separar o conteudo de urn docurnento HTML, Geralmente, essas divi- 
soes ocorrem quando ha uma mudan^a de topico no conteudo. Essas divisoes podem ser realizadas 
com o elemenlo hr. Normalmente, o hr e definido pelos navegadores como block-level element. 

1 

2 

3 

4 

5 

6 
7 
3 
3 

10 
11 
12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 


<body> 

<hl>Novidades do HTML5</h1> 

<p> 

Loren ipsun dolor sit amet, consectetur adipiscing elit. Vestibulum 
enim est r ultrices ac vehicula vitae, pharetra id mauris. Quisque sit 
amet nisi mollis sera ferraentum accumsan. Sed sed quam nisi, cursus 
sodales metus, Curabitur dapibus, nassa sed soliicitudin viverra, odio 
juste dignissim metus, vel tempor turpis neque id erat. Aenean ferraentum 
ultricies ante a luctus, 

</p> 

<hr> 

<P> 

Mauris ferraentum lorem nec nisi euismod eiementum, Aenean nec magna 
dolor, vel ferraentum turpis, Mauris convallis, leo sollicitudin 
egestas nalesuada , nunc est ultrices enim, eget varius odio felis et 
velit. Sed ac lorem nibh , ut convallis ante, 

</p> 

</body> 


Codigo HTML2.154: Exernplo de separacdo de conteudo 



Exercicios de Fixa^ao 


Crie um arquivo chamado hr.html no projeto html em Site Root com o seguinte conteudo. 


1 

2 

3 

4 

5 

6 
7 
S 
3 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 


<!DOCTYPE html > 

<html lang = ' r pt-br "> 

<head> 

<meta http-equiv= JI Content-Type" content-" text/html ; charset=UTF-B J| > 

<title>Exercicio de separacao de conteudo</title> 

</head> 

<body> 

<hl>Desenvoivimento Web</h T > 

<h2>hTML</h2> 

<p> 

Loren ipsun dolor sit amet, consectetur adipiscing elit, Vestibulum 
enim est r ultrices ac vehicula vitae, pharetra id mauris. Quisque sit 
amet nisi mollis sera ferraentum accunsan, Sed sed quam nisi, cursus 
sodales metus, Curabitur dapibus, nassa sed sollicitudin viverra, odio 
justo dignissim raetus , vel tempor turpis neque id erat, Aenean ferraentum 
ultricies ante a luctus, 

</p> 

<hr> 
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22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 


<h2>CSS</h2> 

<p> 

Lorem ipsunt dolor sit amet , consectetur adipiscing elit. Vestibulum 
enim est t ultrices ac vehicula vitae t pharetra id ntauris. Quisque sit 
amet nisi mollis sem ferment urn accumsan , Sed sed quam nisi, cursus 
sodales metus, Curabitur dapibus r massa sed sollicitudin viverra f odio 
juste dignissim inetus, vel tempor turpis neque id erat. Aenean fermentum 
nitrides ante a luctus, 

</p> 

</body> 

</html> 


Cddigo HTML 2.155: hr.htmi 


Arquivo: https: /Vgithub,com/KI9/K19-Exercicios/archive/k02-html-fixacao90,zip 


^ No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/html/public_html/hr. htini. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost/~<USUARIO>/htmUpublic_html/hr,html. 


Agrupando elementos 


Podemos agrupar elementos atraves dos elementos div ou span, Normalmente, os navegadores 
definem o elemento div corao um block-level element e o span como um inline-level element, O 
principal objetivo em agrupar elementos com div ou span e aplicar formatagoes especificas para 
cada grupo. Por isso, a utilidade desses elementos ficara mais clara quando falarmos sobre CSS, 



Erro: Fechamento inadequado das tags 


Um erro comum, ao definir um documento HTML, e o fechamento inadequado das tags. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DOCTYPE html> 

< ht m 1 lang=" pt -br" > 

<head> 

<meta http-equiv = J| Content-Type rJ content-" text/html ; charset = UTF-B J| > 
<title>Fechamento inadequado das tags</title> 

</ head> 

<body> 

<strong>Fechamento <em>inadequadc</strong> das tags</em> 

</body> 

</html> 



Erro: Imagens sem texto alternative 


Um erro comum, ao definir um documento HTML, e nao definir um texto alter natives para as 
imagens. 
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1 

2 

3 

4 

5 

6 
7 
S 
9 

10 


< ! DOCTVPE htinl > 

<htral lang=" pt-br"> 

<head> 

<meta http-equiv = ' r Content-Type" content = r ' text / html ; charset = UTF-B 1 " > 
<title>Imagens sem texto alternativo</title> 

</heads 
<body> 

<img src = " imagem . png '*> 

</body> 

</html> 



Erro: Criar listas com o elemento br 


Um erro comum, ao definir um documento HTML, e criar listas com o elemento br. 


1 <!DGCIYPE html> 

2 <htm 1 lang = ?l pt-br'’> 

3 <head> 

4 <meta http -equi v = J| Content-Type" content-" text/html; charset-UTF^fi"> 

5 <title>Criar listas coin o elemento br</title> 

6 </head> 

7 <body> 

8 1. HTML cbr > 

9 2. CSS<br> 

10 3. JavaScript 

11 </body> 

12 </html> 



Exerclcios Complementares 


O Cne um arquivo chamado pagina-simples,html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


^ ^ K 19 Tremirrepta 

4 - C 0 localhostMdio/htmI f publlcjitml J pagina^mptes.html <3, ^ = 

Lcircm ipsLim dolor sil emel, ooiiseetctur adipiscmg eiit. Suspcjidissc hibeudum pclleiitesquc bcadrcril. Aliquam prc.tium, 
quam in porttilor vcstibulum, massa liguLa sod ales metus, roc hendrerit mine puma cu jrauris. 


© Crie um arquivo chamado geografia.htinl no projeto html em Site Root. Utilize a imagem abaixo 
como base. 
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® ^ ^ Curmiididti no- Munda 



C? ^ local host,' -ke izo/ht mUpublicJilrnljf geog rafia.html 


= 


Curiosidades do Mundo 

Europa 

A Europa £ o scguudo menor conrincnteem superffcic do muiido. cofcrindo ccrca c£c 10 1 BO 000 quilfmeno&qsi&dr&dos ou 2% da superffcic 
da Term eocrca de6,S% da aicu acima do nfvd do mar. 

Almunhu 

Com 81J8 milbocs dc baJbitantcs cm janciro dc 20 l0 P o paB (cm a malor populacao entrc os E stack* mcmtwc* da Uniao Europcia ce 
lambdm q Jar da lercdra malar populate do migranies kiKmadonajs cm code o ciutido. 

Besse 

A capital £ Wiesbaden c a maior eidade FfancofuiTC do Meuo (Frankfurt am Main'), ondc csii krcalizado uindos maiorcs acre pones do 
mundo e urn centro ftnanccifo de gnuide Impoftflucin. 

Ftflnlifort 

Frankfurt am Main cm Fran coforte do Mono, mats confuse ida simpiesmente eomo Frankfurt, c a malor cidadc docstado alcmao dc Hesse c a ' 
cjuuiifl maief old arte da AJemanha, com uma populate 7OOJ0OO habMiues urn 2012. 

Asia 

A Asia £ o major dtxs contmentea, tanfo cm area eomo cm populate. 

Japao 

O pals(5urnarquiptflago de 6 B52 Hbas.cujas quauo maiores s5o Honshu,Hokkaido,Kyushue Shikoku, mpmsentando cm conjunto979t 
da area DcncsUc national. 

Obioswa 

Afidgamenre, Okifsa.^ a fazia. parte de urn mine lndepeadenie, o mine Ryukv a , o que foi decisive para o descdvolvimemco de unia cm Lima 
pTdpria do desen rolardc uma hLsdoria particular c sipiificativajncnlc difcrcuciada do rcsto do Japao. 

Najo 

De 21 dc j'ultio and 23 dc julho dc 2000 „ foi sede do cncontro anual do G B. 

Fnnlc: wikjpedia.nqi 


@ Crie urn arquivo chamado seguro-treinameiito.html no projeto lit ml em Site Root. Utilize a 
imagem abaixo como base. 


^ n n Segura rreinamcn-ro K1S ■ _ 

4- C localhost,'~kci2'oyhitml/ptihUc_html/scgLfro-trelnameinTo.htmi 


Na K19 o aluno faz o curso quantas vezes quiser! 

Compnomctidfl com o aprendiea-do c com a. salisfa^ao dos scus alunos, a K 19 cricu o ScEirro Trcinamcnto, 

Ao eontratar um curso, o aluno poderSi rcfaz£-lo quantas vezes dc&cjar mcdlantc a disponibilidadc dc vagas c p&gamcnto 
da franquia do Segnro Treinamtnto. 


s 31 

0 A = 
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O Crie um arquivo chamado caracteres-especiais.html no projeto html em Site Root, Utilize a 
imagem abaixo conio base. 


^ o C 1 Canctcres tipenau K , ^ — 

* 

CL local host/-IttlM^hrmVpublksJ'ilinl/caracleres-esiKdais.hlfnl 

5#] P P = 

Caracteres especiais 

X * « / # 



Q Crie um arquivo cliarnado espacos~e-quebras-de-linha.html no projeto html em Site Root. 
Utilize a imagem abaixo como base. 



O Crie um arquivo chamado codigo-java*html no projeto html em Site Root, Utilize a imagem 
abaixo como base. 


& o O CodigDjjwa 

£ 

+- CL local host;-kei?o/html^(Hjibl3c_litnil/<flcilgo-ia w ’a.htffiJ 

' "l!* ^ = 

Codigo Java 


double nuinaro - Hath, random f) : 
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0 Crie uni arquivo chamado elementos-i-b.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


® O O - Elemcnto i e elemcnto b W ,_, 

4- C I. 1 ' local host. 1 -- keizo/html/ public Ji&n I/elcmentos-l-b, html 


Elcmcnto i e clemento b 

* Pc rq umlio -d a - md ia an Cavia parceling 

* BjCitupEcn-pia dc scguranfa) 

* shoot the JwsfZtffbatcr papo ou jogar cotivcrsa fora) 

* Moj^vrf(translEtcra^ao da paiavra Moscow cm msso) 

* Se ri3u .tabes, aprenrfe; se Jd tabes, ettsina. (Confiitio) 

Atualiacnte H praticatncnfc todos os iiiiltmais corpora Lis ci possucm interfaces web. Para qucm dcscjet atuar no mcrcado 
do desen volvimento de software, d obrigatdrio a conhecamenta das linguagens: HTML. CSS c JavaScript. 


© Crie urn arquivo chamado sao-paulo.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


^ O O San PaLI | D 

4- C Li loca!host.,'-kei7o/Kirml/fHJbJlc_htfn!/sao-pag!ci.htnni 


Sao Paulo 


<a* * * = 


A cidade dc SSo Paulo possiii uma drea dc 1.523 km". Em 2011SSlo Paulo cmitiu 16,430 milhSes dc toucladas dc CO?. 




Q Crie urn arquivo chamado spfc.html no projeto html em Site Root, Utilize a imagem abaixo 
como base. 


^ C 1 O Sin p au | D FC 



4- C? Li local host/ -keizo/html/publlcjifml/ spfc.hEiml 

«*!*♦ 

= 

Sao Paulo FC 



0 S3o Paulo FC <5 o litiico time brasilciro que ganbou trSs vezes o m undial de dubes. 
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^ Crie um arquivo chamado mais-citacoes.html no projeto html em Site Root Urilize a imagem 
abaixo como base. 


& ° ^ Cits¥«: 



G local host,' -keiZ'O/html^puhllc.litml/ mai s-citacoes.html 

* * 

= 


O que. a Wikipedia tala sabre Java? 

Java is a general-purpose, concurrent, class-based, object-oriented computer programming language that is 
specifically designed to have as few implementation dependencies as possible, r^als*] 

The original and reference implementation Java compilers, virtual machines, and class libraries were 
developed by Sun from 1991 and first released in 1995, As of May 2007, in compliance with the 
specifications of the Java Community Process, Sun relic cn sc d most of its Java technologies under the GNU 
Genera] Public License.. [*Vlots*] 

Galvin Bueno dissc: ' A scJc^Sd brasileira prioriza n colctivo e a individualidade 
Dom Quixote do Miguel dc Cervantes 6 um dos Livros mais vendidos da histdria. 


© Crie um arquivo chamado abbr.html no projeto html em Site Root. Utilize a imagem abaixo 
como base. 


^ ^ ^ AbmiafMi 


a U local host;-■keiao/html/publlcJitml/abreviaeMS. html 

<a#j« ♦ * s 

Abrcvia^ocs 


* FBI 


* CIA 


* CST 





© Crie um arquivo chamado mais-defitiicoes.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 
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^ O O Definite*! 

<- O L localhostj'-!('eiioyKtml/ , fM(b1<c_lifm!/mji5-defiiiicoes,hlmi OH ^ $ 

Definigoes 

Ftriha jeca 

Chute que fei£ a bob pcrcoroer utua trajctdiia cm curva accntuada corn uma queda brusca no final do pcrcurso. 
Lanterns 

Equlpc quc ocupa a ultima posi^ao dc utn campconato r 
Prim&ro pau 

Travc mahs prbuima da origem dc urn cr uziimcnto. 


© Crie urn arquivo chamado mais-alteracoes.html no projeto html em Site Root. Utilize a imagein 
abaixo como base. 


* 0 O 


LKcmpIo de aHr-ipie-i 




t- CL localhost/-keiz^htm I/publtcJitm I/mais-alteracses.html 


<*■&! <t » ♦ a 


Altera^oes 

Atim u n e n t ^ c ii ^ora-ftft4fl^emh Amfllmenh? -, eu moro o n Brawt. E u ^ue f &o e flhc.ce f a Bfrin. 


© Crie um arquivo chamado mais-datas.html no projeto html em Site Root. Utilize a imagein 
abaixo como base. 


_. 

^ O C 1 OatiiehDrai >: ^ 



+- CL local host/-keizc/html/puto3lcjimil/mais-data5.htfrii 

5#j « ♦ i 

= 

Dalas e horas 



* 0 BnasiL foi pcnfacampcao cm 30 dc Junho dc 2002. 

* ELe nSn podc esquoccr a Dia das mulhercs. 





© Crie um arquivo chamado texto-marcado*html no projeto html em Site Root, Utilize a imagem 
abaixo como base. 
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^ ^ ^ Tsicto marcida 

CD !Qcalho5t/-kei7o/btml/pub1lcJitml/texto-marcadQ,hi:nril {J} 


Texto marcado 

Ayrton Senna da Silva foinm piloto brasilciro do Formula 1, trSs vezes campc3o mundial., nos anos dc IS86 + 1990 c 
1991. Foi tamhdm vice-campeAo tin contra verso campcanatode 1989 e cm 1993 


® Crie um arqiiivo chamado ponlos-turisticos.html no projeto html em Site Root. Utilize a ima- 
gem abaixo como base. 


^ O C 1 PontmT-uirism™ X . _j 


1 

4- C local host; - Ite htm 1 ,' p^jbi ic_htm 1 / pMajitos-twr is tico s. htnrn 

> 

= 

Pontos Turisticos do Brasil 



ILha Bela - SP 

PiHias, Trilhas c Mcqgulhn cm NauFrapo. 

Bonita - MS 

Mcrgulho cm rios dc Sguas transparcntcs h cachociras* gnitas c cavcrnas. 

Museu do Arte dc S3o Paulo - SP 

Grande acervo com diversas obras dc artistas consagrados. 




^ Crie um arquivo chamado mamial-kl9.html no projeto litrnl em Site Root. Utilize a iinagem 
abaixo como base. 


^ Cl O Coma mstafjrnsru iPTO X _. 


Z 1 

<- CD local host;-ke i?o/htm lypubUc.litml/inaniLaaLHirnl 


= 



Como instalar o seu XPTO - K19 Eletronics 


1. Vcrifiquc sc todos os accssdrios cst5o pnesentes. 

2. Colnquc o apart!Iiu net horizontal sobm uma superficie plana. 

3. Cancels o apaiclhn an computadnr utilizsnda um cabo USB. 

4. Use o CD-ROM para instala^o do software. 

5. Concctc o npaiclho a fonts do cncrgia com um adaptador AC. 

6. Lignc o apartlhn e espero n reconhecimenlsQ do computador. 
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(J) Crie rnn arquivo chamado mais-links, html no projeto html ern Site Root. Utilize a imagem 
abaixo como base. 


© O Q f QUnki X ^ 

— * 

0 L local host. ! - Ice iic/htffl1/pub!ic_bim1/iriaiS’ -links. htmi 

<a* $ * = 

Links 


• m 


* Wikipedia 


• Faccbook 



@ Crie um arquivo chamado mais-imagens, html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 


@ O O ■ inugeru 


t- G 11 loe*lticMy''keiz<j/ktnij/public_ l ilml^rnii»-nii«fl«n*ifrtiTvl 

* * £ 

K19 Treinamentos 


xtti 

KI9 


TRCIHftMCNTTaS 


Cursos 


Sjflr 

* K2l - PcrsjstSnda com JPA2 e Hibernate 


V 

* K22 - Deacnvulvimcntn Web Aveng ad □ com JSF2, EJB3.1 c CDI 


1am 

* K23 - Tntegra^ao dc Sistcmas com Wcbsemces, IMS c EJB 




@ Crie um arquivo chamado mais-tahelas.html no projeto html em Site Root. Utilize a imagem 
abaixo como base. 
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^ O Tabcla* 

+*■ C ' D Iocilhost/^eizo/htTT^/publk^htrrt/ims-’Ubetjs.html ■£! -% 


Continentt/SubcontSntnk Cktadc Idioms 

SSo PflUlO PortUgLlCS 

Am£nca do Sul 

Cidade do Mexico Espardiol 
TcSquio JaponSs 

Asia Xcmgfli Mandarim 

Nova D£lhi Hindi 

America do. Node Nova torque logics 

tJllima atuali^asao; 11 h 1 20 12 


0 Crie um arquivo chain ado mais-formuiarios.html no projeto html em Site Root. Utilize a ima™ 
gem abaixo como base. 


^00 / j - Curricula * _ J 

<- C LI iocalhost/^eizo/html/'i^tolkjUml/mais-fQrmdaFios.lTtml 


* * 


Cadastro de Curnculo 


•Tnformatocs Fcssosis- 
Nome; 

Email: 

Data dc Nascimcnto: mJaa/ww 

Alturafan): fj 

Site: 


Estadft Civil: f Setecltne j) 

Scxo: Masculine Feminine 


-Eadcic^o- 

CEP: 

Endcrc^o; 


—Cootato — 
TclcfoncL 
Cclular: 


i— Conhccimentos - 


HTML CSS J JavaScript 


D.g ts os seus 
conhedmentos 


Mais conhccimcntoH 


P 


Resumo do Capitulo 
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A linguagem HTML e utilizada na cria^ao das paginas web e e especificada pelo W3C. 

► Um document© HTML e composto por elementos hierarquicamente organizados. 

Os elementos sao inseridos etn um documento HTML coni o uso de tags, 

O elemento DOCTYPE e utilizado para declarar o tipo do documento. 

► A raiz de um documento HTML e definida pelo elemento html. 

Inform ago es sobre um documento HTML devem ser definidas no corpo do elemento head. 

No corpo do elemento body, e defmido o conteudo do documento HTML. 

A semantica dos elementos HTML deve ser respeitada para a correta interpretagao do conteudo 
por buscadores e softwares de leitura (acessibilidade), por exemplo. 

Os elementos hi, h2, h3, h4, h5 e h6 sao utllizados para definir titulos em um documento 
HTML, 

Paragrafos sao inseridos em um documento HTML com o elemento p. 


Determinados caracteres devem ser inseridos em um documento HTML atraves do seu respec¬ 
tive codigo. 


Os elementos pre, code, i, b, sub, sup, strong, em, blockquote, q, cite, abbr, dfn, ins, del, s, 
time e mark sao utilizados para definir os textos de um documento HTML. 


As listas sem ordem sao definidas com o elemento ul As listas com ordem sao definidas com o 
elemento ol. As listas de descrigoes sao definidas com o elemento dl. 


Os itens das listas com ordem e sem ordem sao definidos com o elemento li. 


& Os termos de uma lista de descrigoes sao definidos com o elemento dt. As descrigoes desses 
termos sao definidas corn o elemento dd. 
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Podemos adicionar um documento HTML dentro de outro documento HTML coni o elemento 

iframe. 


Os links de um documento HTML sao criados com o elemento a. 

O elemento img e utilizado para adicionar imagens em um documento HTML, 


As tabelas sao criadas com os elementos table, tr, th, td, thead, tbodyj caption, colgrotip e col. 


Para criar um formulario, devemos utilizar o elemento form. 


Basicamente, os campos de um formulario sao criados com os elementos input, textarea e 

select. 


As partes de um documento HTML podem ser definidas corn os elementos header, footer, 
article, aside, section, figure, figcaption, div e span. 


As partes de um documento HTML podem ser separadas com o elemento hr. 


Q Prova 


| Quern define a linguagem HTML? 

a) Microsoft, 

b) AnateL 

c) ABNT, 

d) W3C. 

e) NASA. 

Q O que o elemento DGCTYPE determina? 

a) O tipo do navegador, 

b) O tipo do sistema operacional. 

c) O tipo do documento. 
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d) O tipo do dispositivo. 

e) Nenhuma das anteriores. 

| Qual alternativa esta correta? 

a) A ralz de um documento HTML e o elemento body, 

b) O elemento head e colocado no corpo do elemento body. 

c) O elemento body e colocado no corpo do elemento head. 

d) A raiz de um documento HTML 5 e o elemento html5. 

e) Os elementos head e body sao colocados no corpo do elemento html. 

| Qual alternativa ap re sent a um comentario HTML valid o? 

a) <1- comentario -> 

b) <* comentario *> 

c) / / comentario 

d) l* comentario */ 

e) # comentario 

Q Q u al alt e r nativa e sta incorreta? 

a) Respeitar a semantica dos elementos HTML facilita o trabalho das ferramentas de busca. 

b) Respeitar a semantica dos elementos HTML facilita o trabalho das ferramentas de leitura de 
tela para deficientes visuals, 

c) Respeitar a semantica dos elementos HTML diminui o tamanho das paginas web. 

d) A semantica dos elementos HTML e definida na especificagao da linguagem HTML. 

Q Qual alternativa esta correta? 

a) Titulos com h2 sao mais importantes do que titulos com hi. 

b) Os titulos sao definidos com os elementos hi, h2, h3, h4, h5 e h6. 

c) Os titulos sao definidos com os elementos hi, h2 e h3. 
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d) Os titulos sao definidos com os elementos headerl, headers, headers, header4, headers e 
header6. 

e) O elemento headerl equivale ao elemento hi. 

| Qual alternativa esta correla? 

a) Texto pre-formatado pode ser definido com o elemento text-pre, 

b) O elemento code e utliizado para associar codigo JavaScript a um docuinento HTML. 

c) O elemento stronger define textos importantes. 

d) Citacoes longas sao definidas com o elemento blockquote. 

e) Podemos marcar texto com o elemento text-mark. 

H Qual alternativa esta correta? 

a) As listas com ordern sao definidas atraves do elemento dl, 

b) Os termos de uma lista de describes sao definidos com o elemento li. 

c) As listas com ordem e sem ordem sao definidas atraves dos elementos ui e ol respectivamente. 

d) Os itens de uma lista com ordem sao definidos atraves do elemento item, 

e) Uma lista pode ser definida dentro de outra lista. 

| Qual alternativa esta incorreta? 

a) Os links sao definidos corn o elemento a. 

b) O destino de um link e determinado pelo atributo href. 

c) O destino de um link com target=' , _biank t ’ e aberto em uma nova aba on janela. 

d) O destino de um link com target= TI _self 11 e aberto na mesma aba on janela. 

e) O atributo to define o destino dos links. 

] Para exibir um texto quando o mouse passa sobre uma imagem, devemos utilizar qual atributo 
do elemento img? 

a) alt. 


®KI9 www. f ac ebook. com/k 1 9trei nam entos 


137 




HTML 


138 


b) title. 

c) tooltip. 

d) text. 

e) description. 

| Qual alternativa contem apenas elementos relacionados as tabelas? 

a) table, td e column. 

b) table, row e col. 

c) table, table-head e table-body. 

d) th, tr e td. 

e) tabular, tr e td. 

] Qual alternativa esta correta? 

a) As caixas de texto sao adicionadas com o elemento input-text, 

b) Os rotulos sao defmidos com o elemento input-label. 

c) Podemos criar um botao de submit com o elemento input. 

d) As caixas de senha sao de fluid as com o elemento password. 

e) Os checkboxes e os radios sao criados com os elementos checkbox e radio respectivamente. 

] Qual alternativa esta correta? 

a) As op^bes de um drop-down list sao definidas com o elemento input. 

b) As opgoes de um drop-down list podem ser agrupadas com o elemento option-group. 

c) O atributo selected do elemento alternative define as opcdes selecionadas. 

d) Po demos criar um drop-down lista com o elemento drop-down. 

e) O elemento select e utilizado para criar drop-down lists. 

] Qual alternativa esta correta? 

a) Os campos de um formulario podem ser agrupados com o elemento inputset. 
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b) Os campos de um formulario podem ser agrupados com o elemento iieldset, 

c) O elemento label deve ser utilizado em conjunto com o elemento fieldset. 

d) O elemento legend deve ser utilizado em conjunto com o elemento inputset. 

e) A legenda de um fieldset e definida atraves do atributo legend. 


] Qual alternative esta correta? 


a) As sugestoes para o autocomplete de um cainpo sao definidas pelos elementos datalist e op¬ 
tion. 

b) As sugestoes para o autocomplete de um campo sao definidas atraves do atributo autocom¬ 
plete, 

c) O elemento disabled e utilizado para desabilitar campos ou botoes. 

d) O atributo off e utilizado para desabilitar campos ou botoes. 

e) Campos fixos podem ser definidos com o atributo no-write. 


Minha Pontuagao 


Pontuagao Minima: 



Pontuagao Maxima: 
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Quando nao definimos uma formatagao especifica para os elementos HTML de uma pagina web, 
eles sao exibidos com o estiio determinado pelo navegador utilizado. Ha dois problemas principal 
em deixar os navegadores decidirem qua! formatagao deve ser adotada. O primeiro e que cada na¬ 
vegador pode adotar uma formatagao diferente. Consequentemente, uma mesnia pagina web nao 
sera exibida exatamente da mesnia forma em todos os navegadores, O segundo problema e que as 
formatagdes adotadas pelos principals navegadores nao sao "bonitas” 

Podemos padronizar a forma que as paginas web sao exibidas nos diferentes navegadores e obter 
urn visual agradavel definindo a nossa propria formatagao. O estiio das paginas deve ser definido 
com a linguagem CSS (CascadingStyle Sheets). 


Mais Sobre 

Assim como a linguagem HTML, a linguagem CSS e definida pelo W3C. Voce pode con¬ 
sul tar a especificagao do CSS no enderego http: //www. w3. org/Style/CSS/specs. 
O W3C faz diversas recomendagdes sobre como implementar as funcionalidades do CSS. Con- 
tudo ? nem sempre, os navegadores respeitam essas recomendagdes e eventualmente cada nave¬ 
gador adota uma abordagem propria para uma determinada fun clonal id ad e. Essas diferengas 
podem gerar problemas nas paginas web. 


Mais Sobre 

Nas primeiras versoes da linguagem HTML, a formatagao era realizada atraves de atri- 
butos especrficos dos elementos. Por exemplo, a cor do fundo de uma pagina poderia 
ser definida da seguinte forma: 


1 cbody b£color= Ir red. T> 


Hoje em dia, essa abordagem e totalmente nao recomendada. Qualquer alteragao visual dos 
elementos HTML deve ser definida atraves da linguagem CSS. 


Box Model 


Todo elemento HTML, no corpo de uma pagina web, esta contido em um box. Considere o do- 
cumento HTML abaixo. 


1 <!DOCTVPE html> 

2 <html lang = ,r pt-br"> 

3 <head> 

A <meta http-equiv = J| Content-Type" content^ " test/html ; charset=UTF-B" > 
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5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 


<title>DesenvoIvimento Web</title> 

</head> 

<body> 

<h1>Desenvolvimento Web<7hl> 

<h2>HTML</h2> 

<p> 

Loren ipsun dolor sit amet, conseotetur adipiscing elit. Vestibulum 
enim est h ultrices ac vehicula vitae, pharetra id nauris, Quisque sit 
amet nisi mollis sen fermenturn <strong>accumsan</strong>. 

</p> 

<a href =l '#">Mais sobre</a> 

<h2>CSS</K2> 

<P> 

Loren ipsun dolor sit amet, <em>consectetur</em> adipiscing elit. Vestibulum 
enim est, ultrices ac vehicula vitae, pharetra id nauris, Quisque sit 
amet nisi mollis sen fermentum accumsan, 

</p> 

<a href="#">Mais sobre</a> 

</body> 

</html> 


Agora, observe era destaque na imagem a seguir, os boxes correspondentes aos elementos HTML 
do documento anterior. 


^ f ' DcicnijolLiimcnlci Witb 

it- O Li I Deal hoit/~1tei zo/ hi m I /pubitc_him l/css/box- model, htm I Q <£■/ fl- ■% 


Desenvol vimento Web 


HTML 


Lojvul ipsum dolor sit amet. conscctctur adipiscing clit. J/cstLbulum enkn cs(* ultrices ac vcbicula vitae* pharetra id 
mauris. Quisque sit amet nisi mollis sem fermentum jaccuouam 

;Mais sotffi 


css 


Lorem ipsum dolor sit amtt K ™^^ctef«^adipiscing dh. Vestibutum cnitn est, ultrices ac- vehicuk vitae, pharetra id 
mauris. Quisque. sit amet nisi mollis sem fermentum accumsan. 


Figum 3.1: Boxes 


Na imagem, os boxes dos block-level elements foram exibidos com linha continua enquanto os 
boxes dos inline-level elements foram exibidos com linha tracejada. Os boxes dos block-level ele¬ 
ments ocupam todo o espago horizontal e provocam quebras de linha. Por outro lado, os boxes dos 
inline-level elements ocupam horizontalmente somente o espaco necessario para o sen conteudo e 
nao provocam quebras de linha. 

O box de urn elemento HTML e composto por conteudo (content), margem interna (padding), 
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borda (border] e mar gem externa (margin], 
r 



Figiua 3.2: Box model 


Observe que a largura de um box corresponde a soma dos seguintes comprimentos. 

* Margem externa da esquerda (margin-left] 

* Borda da esquerda (border-left) 

* Margem interna da esquerda (padding-left) 

* Largura do conteudo (width) 

* Margem interna da direita (padding-right) 

* Borda da direita (border-right) 

* Margem externa da direita (margin-right) 

Analogamente, a altura de um box corresponde a soma dos seguintes comprimentos. 

* Margem externa superior (margin-top) 

* Borda superior (border-top) 

* Margem interna superior (padding-top) 

* Altura do conteudo (height) 

* Margem interna inferior (padding-bottom) 

* Borda inferior (border-bottom) 

* Margem externa inferior (margin-bottom) 


Regras 
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Podemos aplicar regras de formata^ao para cada elemento HTML. Observe a estrutura de uma 
regra CSS. 


SeJetor Corpo 

\ \ 



Propriedade 


O seletor determina para quais elementos a regra de formatagao deve ser aplicada, No corpo de 
uma regra CSS, podemos definir diversas propriedades. Cada propriedade define uma caracterlstica 
visual. For exemplo, a propriedade font-size e utilizada para definir o tamanho da fonte utilizada 
nos textos. 


*# Apiicando CSS ao HTML 


Podemos aplicar propriedades CSS a elementos HTML de tres maneiras diferentes. 

Inline style 

Podemos aplicar propriedades CSS atraves do atributo style presente em diversos elementos 
HTML. Essa abordagem nao e recomendada pois o acoplamento entre os elementos HTML e as pro- 
priedades CSS e muito alto dificultando a manutengao das paginas web. 

1 

2 
3 


<p [style = " color : red *': > 

</p> 


Internal style sheet 

As regras CSS podem ser definidas no conteudo do elemento style. Esse elemento deve ser defi- 
nido dentro do head. 


1 

2 

3 

4 

5 

6 
7 
S 
3 


<head> 

<meta http-equiv= "Content-Type" content=" text/html ; charset=UTF -E " > 
<title>Desenvolvimento Web</title> 

I < s t y 1 e > _ 

P~f 

[color : red ; 


[ </style> 

< / h e a d > 
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External style sheet 

Podemos separar o codigo HTML do codigo CSS definido as regras de formata^ao em uni arquivo 
independente. 

1 fp~t 

2 color: red; 

3 [l_ 

Codigo CSS 3.1: estiio.css 


Depois de definir as regras CSS em uin arquivo separado, ele deve ser associado ao documento 
HTML atraves do elemento link. 


1 

2 

3 

4 

5 


<head> 

<meta http -equi v = J| Content - Type p content^ test /html; charset=UTF-6 J| > 
<title>Desenvolvimen.to Web</title> 

[ <link rel- fl style s heet 11 type =" text / css " href =" est i lo , css "> 

< / h e a d > 


Comentarios 


Podemos adicionar comentarios no codigo CSS atraves dos marcadores /* e */. 


1 /* uma regra CSS para formatar os paragrafos */ 

2 p { 

3 color: red; 

4 } 


Codigo CSS 32: estUacss 


*W Chrome DevTools 


Como vimos no capltulo anterior, podemos utilizar ferramentas como o Chrome DevTools para 
analisar e modificar os documentos HTML, Essas ferramentas, tambem podem ser utilizadas para 
editar as propriedades CSS dos elementos de uma pagina web. Considere o codigo HTML e o CSS 
abaixo. 


1 

2 

3 

4 

5 

6 

7 

8 
3 

10 

11 

12 


< ! DQCTTPE html > 

<html lang = jr pt -br 11 > 

<head> 

<title>K19 - Chrome DevTools </ title> 

<meta http-equi v = J| Content-Type r ' content^ 1 2 ' test/html ; char set = UTF-B J| > 

<link rel = ''stylesheet" type=” text/css " href=" chrome-devtools . css "> 

</head> 

<body> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

<p class= " class 1 |J >Lorem ipsum dolor sit amet r consectetur adipiscing elit,</p> 
</body> 

</ html> 


Codigo HTML 3.6: chrome-devtools.html 


1 P { 

2 border: 4px solid red; 
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3 

4 

5 

6 
7 
3 
9 


font-size: 20px; 


.classl { 

color: blue; 

border: lOpx solid green; 


Cddigo CSS 3.3: chrome-devtools.css 


Observe a figura abaixo. Atraves do painel Styles po demos visualizar as regras CSS que for am 
aplicadas a um determinado elemento HTML. Esse painel tambem mostra a origem dessas regras e 
as dimensoes do box do elemento. 



l£! >!= 0, hirttl , body __ ^ 


Podemos Incluir, remover, desabilitar ou alterar as propriedades de um elemento clicando sobre 
elas no painel Styles. 
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# O n ,• u K1 g _ chrome DevTQOIs 

4- C !oca]host/-kel 2 Q /html^publkJiiJTi I ^s/chro me-devtools.html ^ 0 E 



Elements Resources Network: Sources Timeline Proxies Aud is Conso'e 


larig-"pt-br"» 

► thcod>--;/hcad> 

Styles j Com pu ted Eve nt Lisle ne rs 

DOM Sreakpoints Proaerlies 

elerrent.styLe Lrt 

1 

+ 3? & 

■sp^Lprcrr ipsu .11 flalar sit anet, consectetur adipiscinj 
ellt. 

p £ 

border; 4p k solid Hrod- 
-fSBT^^fTre: 3@p* i 

} 

chrpnc-JcytpQl?.E3a:l 

■cp c In :>$,="«: la EsL'^Lorem ipsuai dolor sit anei, consEciei-.r 
odipiscing clit,-sj r p> 


■(/b bd ‘/> 

*/ht;nl> 

p £ 

display: block; 
-webkit-srargin-bctore: Isms 
-webklt-narijii'i-arter ; lenj 
-wrbkit-Targin-stsrt : 0px: 
-webkit-narain-end : 0px; 

\ 

user agent stylesheet 


border *i 
pail ding- 
1 - I 5T6 x; 


l£l hi ml b ucy 


Observe na imagem abaixo que o elemento HTML selecionado no painel Styles e afetado por 
duas re gras CSS oriundas do arquivo chrome-devtools.css, Re pare que a propriedade border e defi- 
nida nessas duas regras. O Chrome DevToois indica atraves de um trago horizontal qual ocorrencia 
dessa propriedade esta sendo desconsiderada, Mais adiante, discutiremos como determinar a prio- 
ridade das regras CSS em situagoes como essa. 
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No painel Computed podemos conferir todas as propriedades CSS que foram aplicadas em um 
elemento. 
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Se desejarmos visualizar as propriedades que forain herdadas dos elementos ancestrais, pode- 
nios marcar a op^ao Show inherited. 
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Exercicios de Fixa^ao 


@ Abra o Netbeans e crie um projelo chamado css. 


& 


Importante 

- ^ No Windows, utiiizando o IIS (Internet Information Services) como Web Sewer, voce 
deve salvar o projeto css em C:\inetpub\wwwroot. Lembre-se que e necessario ins- 
talar o IIS conforme vimos anteriormente. 
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Importante 

No Ubuntil, utilizando o Apache HTTP Server conio Web Sender, voce deve salvar o pro- 
jeto css em /home/<USUARIO>/public_html. Lembre-se que e necessario instalar 
e configurer o Apache HTTP Server como vimos anteriormente. 
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Figiira 3.5: Projeto css 


o o o 

NetBeans IDE 7.3 



i ft @ hi % \ ^ . 

~Ti T K ► 

. ' CV' Search l,Sfi + ll 

<$} 






Me* UTMl.? Application 




Steps 


1. Choose Project 
7. Name and Location 

3. Site Template 

4. JavaScript i lies 


(> 

=n< 3 —-ii 

f /Users/keizo/Sitej 

1 browse... | 



Project Folder. /Users/fcelzo/Sltei/cs-s 


\ 


Hel p < Back 


tf 

| Ngxi, I d Fir'-.h j Ca 


Figum 3.6: Projeto css 


Arquivo: https:/7github.com/K19/K19-Exercicios/archive/k02-css-fixacao1 .zip 
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e No projeto css, crie um arquivo chamado css.htmi. Todos os paragrafos desse documento devem 
ser exlbidos ern negrito, coni cor azul e com fonte 20px. Defina uma regra CSS para formatar os 
paragrafos. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 

15 

16 
17 
13 


< ! DGCTTPE html > 

<htrail lang = '' pt-br"> 

<head> 

<meta http-equiv=" Content-Type" content^" text/html ; charset=UTF -8" > 
<title>CSS</title> 

<style type- '' text /css" > 

P { 

font-weight: bold; 
font-size: 2Qpx; 
color: #OOOOFF; 

</style> 

</head> 

<body> 

<p>Un paragrafo formatado</p> 

<p>0utro paragrafo forraiatado</p> 

</body> 

</titmI > 


Codigo HTML 3. 7: css.htmi 


Arquivo: https: / /github, cou/K : 9,■■'K10-ixercicLos/archive/k02-css-fixacao2.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http: //lo ca 1 hos t/css/public_ht rail /css, html. 


No Ufountu, utilize o Chrome para acessar o endere^o: 


http://loca 1host / U5UAR IO>/css/pub 1ic_h t ml/cs s , h tml . 


© Para organizar melhor o conteudo e a formata^ao da pagina criada anteriormente, crie um ar¬ 
quivo CSS chamado style.css no projeto css. 


1 p i 

2 font-weight: bold; 

3 font-size: 20 px; 

4 color: #OOOOFF; 

5 } 


Codigo CSS 3.4: style.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao4.zip 


e 


Modifique o arquivo css.htmi para aplicar as regras de formatagao criadas no exercicio anterior. 


1 <!DGCTYPE html> 

2 <htm 1 lang = ?l pt - br' 1 > 

3 <head> 

4 <meta http-equiv^ 1 Content-Type" content-" text / html ; charset=UTF-S " > 

5 <title>CSS</title> 

6 f <link rel = n styleshe ei " t ype = " t ext / css |J href = J| style . css " > 

7 </head> 

3 <body> 

9 <p>Um paragrafo formatado </p> 
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10 

11 

12 


<p>Outro paragrafo formatado</p> 
</body> 

</html> 


Cddigo HTML 3.8: ess.hrml 


Arquiuo: https://github.com/K 1 9/K19-Exercicios/archive/k02-css-fisacaoS . zip 


Cores 


Ha diversas formas de escolher uma cor na linguagem CSS. 


Nome 

A especificaqao da linguagem CSS nomeou 147 cores. Voce pode verificar a lista desses nomes 
no endere^o http: //www, w3 .org/TR/css3-color/#svg- color. As cores basicas do CSS sao: aqua, 
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. 


Hexadecimal 

A quantidade de cores suportada pela linguagem CSS e 16.777.216. Como vimos apenas 147 co¬ 
res foram nomeadas. Para escolher uma cor que nao possui um nome, podemos utilizar o codigo 
hexadecimal da cor desejada. Todas as cores possuem um codigo hexadecimal. Veja o cddigo hexa¬ 
decimal das cores basicas. 


cddigo hexadecimal 

nome da cor 

cor 

#OOFFFF 

aqua 


#000000 

black 

* 

#000OFF 

blue 

* 

#FFQ0FF 

fuchsia 

4 

#808080 

gray 


#008000 

green 


#OOFFO0 

lime 

* 

#800000 

marron 

* 


cddigo hexadecimal 

nome da cor 

cor 

#000080 

navy 

4 

#808000 

olive 

4 

#800080 

purple 

4 

#FFQ000 

red 

4 

#C0C0C0 

silver 


#008080 

teal 

4 

#FFFFFF 

white 


#FFFF00 

yellow 



O cddigo hexadecimal de uma cor corneqa com o caractere #. Os dots primeiros digitos definem 
a quantidade de vermelho, os dots digitos do meio definem a quantidade de verde e os do is ultimos 
digitos definem a quantidade de azul. 


Fun^ao rgb() 

A funqao rgb() devolve uma cor a partir de uma quantidade de vermelho, de verde e de azul. 
Essas quantidades podem ser definidas em porcentagem ou em valores inteiros de 0 a 255. Veja 
como podemos obter as cores basicas a partir da fun^ao rgb(). 
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rgb() 

nome da cor 

cor 

rgb(0, 255, 255) 

aqua 


rgb(0, 0. 0) 

black 

* 

rgb(0, 0. 255) 

blue 

4 

rgb(255, 0, 255) 

fuchsia 

4 

rgb(128, 128,128) 

gray 

4 

rgb(0,128, 0) 

green 

4 

rgb(0, 255, 0) 

lime 

4 

rgb(128, 0, 0) 

marron 

4 


rgb() 

nome da cor 

cor 

rgb(0, 0, 128) 

navy 

4 

rgb(128,128, 0) 

olive 

4 

rgb(128, 0, 128) 

purple 

4 

rgb(255, 0, 0) 

red 

4 

rgb(192,192,192) 

silver 


rgb(0, 128, 128) 

teal 

4 

rgb(255, 255, 255) 

white 


rgb(255, 255, 0) 

yellow 



Funcao rgbaO 

A funcao rgba() e rnuito semelhante a funcao rgb(), A diferen^a e que a funcao rgba(} possui um 
quarto parametro que define a opacidade da cor. O valor desse parametro dev r e ser maior ou igual a 
0 e menor ou igual a 1. For exemplo, para definir a cor blue com 50% de opacidade, podemos ntilizar 
a funcao rgba(} com os seguintes parametros, 

1 |rgba(Q f 0, 255., 0.5} : 


Funcao hsIQ 

Podemos usar a escala HSL (Hue, Saturation and Lightness ou Matiz, Saturate e Brilho) para 
selecionar uma cor atraves da fun^ao hsl(), Essa funcao recebe 3 parametros. O primeiro deve ser 
um valor mteiro de 0 ate 360. O segundo e o terceiro sao porcetagens. 

1 IhslC 180 p 50%, 60K) I 


Funcao hsla() 

Assini como a funcao hsl(), a fungao hsla() tainbem permite a selegao das cores atraves da escala 
HSL. A diferenca e que a ultima permite que a opacidade da cor seja definida. 

1 I tisla (1 80 » 505S, 60%,, 0.5) I 


Unidades de medida 


Para definir um tamanho ou uma distancia, devemos utilizar as unidades da linguagem CSS. 
Podemos classificar essas unidades em absolutas e relativas. 


Unidades absolutas 


Unidade 

Descri^ao 

cm 

centimetre 

mm 

milimetro 

in 

polegada 

pt 

ponto (1 pt e igual a 1 /72 in) 

PC 

pica (1 pc e igual a 12 pt) 

px 

pixel 


8KI9 www. f ac ebook. com/k 19trei nam entos 


155 














































css 


156 


Apesar de ser considerada absoluta, a unidade px depende da resolugao e do tamanho da tela. 
Por exemplo, considere uma tela de 15 polegadas com resolu^ao 1920x1080 e outra de 14 polegadas 
com resolucao 1024x768, Na primeira tela, 1 px e igual a 0,172 mm. Na segunda tela, 1 px equivale a 

0,277 mm. 


Umdades relatives 


Unidade 

Descri^ao 

em 

1 em e igual ao tamanho da fonte do elemento onde essa unidade for utili¬ 
zada. 

ex 

Geralmente, 1 ex e igual a altura da letra "x” da fonte atual. 

ch 

Geralmente, 1 ch e igual a largura do digito "0" da fonte atual. 

rem 

1 rem e igual ao tamanho da fonte do elemento raiz do documento HTML. 

vw 

1 vw e igual a 1% da largura da area de visualiza^ao do navegador [viewport). 

vh 

1 vh e igual a 1% da altura da area de visualiza^ao do navegador (viewport). 

vmin 

1 vmim e igual ao valor minimo entre vw e vh. 

vmax 

1 vmim e igual ao valor maximo entre vw e vh. 


Backgrounds 


Podemos definir a formata^ao do background de um elemento HTML com as seguintes proprie- 
dades CSS: 

b ackgr o und - co lor 

A propriedade background-color e utilizada para definir a cor do background dos elementos 
HTML. 


Valor 

Descri^ao 

color 

Uma cor CSS, 

transparent 

Faz o background ser transparente (padrao). 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


|09 Treinamentos 

|K19 Tremamexitos 
K19 Treinamentos 


backeround-col&r: 
background-color: 
background-color: 


yellow 
ttcla4ed 
tr ansparent 


background-image 

A propriedade background-image e utilizada para definir a imagem que deve ser utilizada como 
background de um elemento HTML. 


Valor 

Descri^ao 

urlt'urH 

none 

inherit 

URL da imagem de background. 

Sem imagem de background (padrao). 

Assume o valor da mesma propriedade no elemento HTML pai. 
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L arena ipsum dolor atamet, consectetur 
a&pisemg elit. Nunc iaculis pharetia 
felis elementum mollis Integer iaculis 
luctus ante quis consectetur. Pellen- 
tesque a libera ultnces, varius nibh eu p 
ullamcarper nunc. Sed laculis cangue 

dui nec laculis U( sagittis nec tartor -„ background-image: url ('bg-image . png'> 

qms congue Quisque linadunt tincid- 
unl felis id fennentum Maecenas 
atiprscing faudbus nulla et fectlias 
Quisque sed d ementum sem. Vestibu- 
lum ante ip sum pnmis in feucibus ora 
luctus et uitnees pDsuere cuhilia Curae, 

Morin lacus odio, adipisdng et ultnces 


% 


Mais Sobre 

Podemos definir multiplas imagens de background. As URLs dessas imagens devem 
ser separadas por virgula. As imagens sao sobrepostas sendo que a primeira ficara no 
primeiro piano, a segunda no segundo piano e assim por diante ate a ultima que ficara no ultimo 
piano. 


1 background - image : url ( ,r imageml , png ' F ) r url ( Fl intagem2 . png M ) , url(" imagem3 , png ; 


b ac kgr o und - repeat 

Por padrao, se uma imagem utilizada como background for menor do que o box do elemento 
HTML correspondente, ela sera replicada na horizontal e na vertical. A propriedade background- 
repeat permite controlar como essa replica^ao deve ser realizada. Essa propriedade aceita os se- 
guintes valores: 


Valor 

Descri^ao 

repeal 

A imagem de background e replicada na horizontal e na vertical (padrao). 

repeat-x 

A imagem de background e replicada apenas na horizontal. 

repeat-y 

A imagem de background e replicada apenas na vertical. 

no-rep eat 

A imagem nao e replicada. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 
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backgiound-iepeat: repeat-y 



backgro und - at t a chmen t 

A propriedade background-attachment permite definir qual e comportamento dos backgrounds 
em relaqao a rolagem do contend o. 


Valor 

Descri^ao 

scroll 

O background acompanha a rolagem do contetido (padrao). 

fixed 

O background nao acompanha a rolagem do conteudo. 



background-attachment: scroll 


b ackgro und- p osition 

Para dertermlnar a posicao das image ns utilizadas como background dos elementos HTML, de- 
vemos utilizar a propriedade background-position. 


Valor 

Descri^ao 

left top 

Canto superior esquerdo (padrao). 

center top 

Centralizado horizomalmente no topo. 

right top 

Canto superior direito. 

left center 

Do lado esquerdo centralizado verticalmeiite. 

center center 

Centralizado horizon! aim ente e verticalmeiite. 
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Valor 

Descri^ao 

right center 

Do lado dire!to centralize do verticalmente. 

left bottom 

Canto inferior esquerdo. 

center bottom 

Centralizado horizon! aim ente na base. 

right bottom 

Canto inferior direito. 

left 

O mesmo que "left center". 

center 

O mesmo que "center center". 

right 

O mesmo que "right center". 

top 

O mesmo que "center top' 1 . 

bottom 

O mesmo que "center bottom". 

x% y% 

O valor x corresponde a posi^ao horizontal eoja posiqao vertical, hies sao 
relatives ao canto superior esquerdo. 

x% 

O mesmo que ”.x% 50% ''. 

medidal medida2 

A medidal corresponde a posiqao horizontal e a medida2 a posiqao vertical. 
Lias sao relativas ao canto superior esquerdo. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 











left bottom center bottom right bottom 
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b ackgr o und - clip 

A propriedade background-clip determina qual area do box de um elemento HTML deve ser 
afetada pela propriedade background-color. 


Valor 

Descri^ao 

border-box 

Area delimitada pelas bordas (padrao). 

padding-box 

content-box 

Area delimitada pelas margens internas. 

Area delimitada pelo contehdo. 


Lorem ip sum dolor sit amet, consec¬ 
tetur a dip isc mg elit Nunc iaculis 
pharetra felis elementum mollis. 
Integer la cults kictus ante quis 
consectetur. Pellentesque a libero 
uitrices,. v sirius nibh eu, ullamcorper 
nunc Sed laculis congue dm nec 
iaculis. Ut sagittis nec tcrtor quis 


Lorem ipsum dolor sit amet f consec- 
tetur a dip isc mg el it. Nunc iaculis 
pharetra felis elementum mollis. 
Integer iaculis luctus ante quis 
consectetur Pellentesque a libero 
ultnces, vanus nibh eu, ullamcorper 
nunc. Sed iaculis congue dui nec 
iaculis. Ut sagittis nec tort or quis 


Lorem ipsum dolor sit amet f consec¬ 
tetur a dip isc mg elit. Nunc iaculis 
pharetra felis elementum mollis. 
Integer iaculis luctus ante quis 
consectetur Pellentesque a libero 
ultrices, vanus nibh eu 5 ullamcorper 
nunc. Sed iaculis congue dui nec 
iaculis. Ut sagittis nec tort or quis 


-*- background-clip: border-box 


-background-clip : padding-box 


-> background-clip: content-box 


b ackgro und - origin 

A propriedade background-origin determina onde ficara o ponto de origem para o posiciona- 
mento das Imagens utilizadas como background. 
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Valor 

Descri^ao 

border-box 

Canto superior esquerdo da area delimitada pelas bordas, 

padding-box 

Canto superior esquerdo da area delimitada pelas marge ns internas (padrao). 

content-box 

Canto superior esquerdo da area delimitada pelo conteudo. 


LoAn ip sum dolor sit arnet, consec- 
tetur adipiscing el it. Nunc iaculis 
ra felis elementum mollis. 
®Eger iaculis luctus ante quis 
consectetur Pellentesque a libero 
ultnces, varius mbh eu, ullamcoiper 
nunc. Sed iaculis congue dui nec 
iaculis. Ut sagittis nec tortor quis 


_,oreriTipsiim dolor sit amet, consec- 
^^^^Kidipiscmg elit Nunc iaculis 
cliarewa felis elementum mollis. 

iaculis luctus ante quis 
consectetur Pellentesque a libero 
ultnces, van us mbh eu, ullamcorper 
nunc Sed iaculis congue dui nec 
iaculis ITt sagittis nec tortor quis 



dolor sit amet, consec- 
tOTMM^Icing elit. Nunc iaculis 
phM etra felis elementum mollis. 
Integei^^Bculis luctus ante quis 
conse^^Br Pellentesque a libero 
ultnces, vail us mbh eu, ullamcorper 
nunc. Sed iaculis congue dui nec 
iaculis ITt sagittis nec tortor quis 


background-origin: border-box; 
background-repeat: no-repeat; 


background-origin: padding-box; 
background-repeat: no-repeat ; 


background-origin: content-box; 
background-repeat: no-repeat; 


b ackgro und - size 

Quando uma imagem e utilizada como background de um elemento HTML, podemos definir o 
taraanho dess a imagem com a propriedade background-size. 


Valor 

Descri^ao 

auto auto 

Tamanho original da imagem (padrao). 

auto 

O mesmo que "auto auto' 1 . 

medida auto 

A rcitwfrdff corresponde a largura. A altura e calculada de forma proportional 
a largura. 

auto medida 

A medida corresponde a altura, A largura e calculada de forma proporcional 

a altura. 
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Valor 

Descrl^ao 

medidal medida2 

A medidal corresponde a largura e a medida2h altura. 

x% y% 

O valor x corresponde a largura e o y a altura. Esses valores sao porcetagens 
relativas a dimen sao do elemento HTML. 

x% auto 

O valor x corresponde a largura. Esse valor e uma porcentagem relativa a 
largura do elemento HTML. A altura e calculada automaticamente de forma 
proporcional a largura. 

auto y% 

O valor y corresponde a altura. Esse valor e uma porcentagem relativa a al¬ 
tura do elemento HTML. A largura e calculada automaticamente de forma 
proporcional a altura. 

cover 

A imagem de background e redimensionada proporcionalmente de tal forma 
a cobrir toda a area do elemento HTML. 

contain 

A imagem de background e redimensionada proporcionalmente de tal forma 
a ter o maior tamanho possivel sem extrapolar a area do elemento HTML. 





or sit amet, consec- 
elit. Nunc iaculis 
pharetra feiis felementum mollis. 
Integer iaculis luctus ante qiiis 
consectetur. Pellentesque a libero 
ultrices, varius tnbh cu f ullamcoiper 
nunc. Sed iaculis congue dui nee 
iaculis. Ut sagittis nec tortor quis 


background-size: 50% 50% 



Lorem ipsum dolor Hit amet. consec- 
tetur adipi^ciii^ elit, Nimc iaculis 
pha i eti a felis ifiatalSs. 

Integer iaculis luctus ante quis 
con seel etur. Pellentesque a libero 
ultiices, varius nibh eu. ullamcoiper 
nunc Sed iaculis cougue dui nec 
iaculis. Ut sagittis nec tortor quis 


■> background-size: cover 



sit amet, eonsec- 
it. Nunc iaculis 
1 omentum moll i s, 
rictus ante quis 
ntesque a libero 
li eu ? ullamcoiper 
s congue dui nec 
s nec tortor qnis 


background-size: contain 
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background 

A propriedade background e um atalho para as ontras propriedades de background, A sintaxe 
dessa propriedade er 

1 I background: color position size repeat origin clip attachment image; * 1 



Exercicios de Flxa^ao 


@ No projeto css, crie um arquivo chamado backgrounds.html 


1 <!DOCTYPE html > 

2 <htm 1 lang=" pt-br" > 

3 <head> 

4 <meta http -equiv= "Content -Type " con tent- 1 " text /html ; char set =UTF -S JI > 

5 <title>K19 - Backgroundsc/title> 

6 <link rel= r 'stylesheet " type=" text /css " href-" backgrounds . css "> 

7 </head> 

3 <body> 

9 <div id-" divl "></ div> 

10 <div id^" div2 "></div> 

11 <div id = ” div3" ></div> 

12 <div id-" div4 Nl ></div> 

13 <div id-" div5 Jl ></div> 

14 </body> 

15 </html> 


Codigo HTML 3.9: baekgmunds.html 


AtCJUiVO: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao6.zip 


Q No projeto css, crie um arquivo CSS chamado backgrounds.css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

n 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 


div { 

width: 2Q0px; 

height : 100px; 

margin: IQpx; 

border: 5px black dashed; 

1 

#div1 { 

background-color: yellow; 

1 

#div2 { 

background-color: #c1a4cd; 
background-clip: padding-box; 


#div3 { 

background - image : url ( "http :/ / kl 9 L com . br/f igs/seguro-treinamento . png" } ; 
background-repeat: no-repeat; 


#div4 { 

background - image:url( "http://kl9 , com . br/f igs/seguro-treinamen to , png") ; 
background-repeat: no-repeat; 
background-origin: border-box; 
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27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 


#div5 { 

background - image : url( J ' http : //kl 9 . com . br/figs/seguro-treinamento . png J| ) ; 
background-repeat: no-repeat ; 
background-size: contain; 


body i 

background - image : url{ r 'http://k19. com . br/figs / main - header-logo , png |J ) ; 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: top center; 


Codigo CSS3.10: backgrounds.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao7.zip 


O 


No Windows, utilize o Chrome para acessar o endereqo: 


http: //local host/css/public_ht ml/backgrounds, html. 


No Xlfountu, utilize o Chrome para acessar o enderego: 


h 11 p.//loca1host/~<USU ARIO>/css/pub1ic_ht ml/backg rounds.html. 


*|P Textos 


Podemos controlar a formatagao dos textos contidos nos documentos HTML com as seguintes 
propriedades CSS. 

color 

Podemos definir a cor do texto contido em um elemento HTML atraves da propriedade color. 

1 

2 
3 


P t 

color: blue; 

} 


Valor 

Descrigao 

color 

Uma cor CSS. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


text-align 

O almhamento do texto contido em um elemento HTML pode ser determinado com a proprie¬ 
dade text-align. 


Valor 

Descrlgao 

left 

Alinhado a esquerda (padrao). 

right 

Alinhado a direita. 

center 

Centralizado. 

justify 

Justificado. 
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Valor 

Descrigao 

inherit 

Assume o valor da mesma propriedade no elemento HTML pal. 


Lorem ipsum dolor 


Lorem ipsum dolor 


Lorem ipsum dolor 


Lorem ipsum dolor 

sit amet, consectetur 


sit amet, consectetur 


at amet. consectetur 


sit amet, consectetur 

adipiscing eiit. Cras 


adipiscing elit. Cras 


adipiscing elit. Cras 


adipiscmg elit. Cras 

vehicula bibeadum 


vehicula hibendum 


vehicula bibendum 


vehicula hibendum 

arcu sit amet 1 acini a. 


arcu sit amet lacuna 


arcu sit amet lacuna. 


arcu sit amet lacinia. 

Sed dui nulla. 


Sed dui nulla. 


Sed dui nulla. 


Sed dui nulla. 


left center right justify 


text-decoration 


Podemos definir a decoragao dos textos contidos em um elemento HTML com a propriedade 

text-decoration. 


Valor 

Descrigao 

none 

Texto sem decoragao (padt ao). 

underline 

Texto com trago inferior. 

overline 

Texto com trago superior. 

line-thro ugh 

Texto riscado. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pal. 


Lorem ip sum dolor sit amet, consectetur adipiscing elit. 
Lorem ip sum dolor sit amet, consectetur adipiscing elit. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Lorem ipsum dolor sit am e t, cons e ct e tur adipiscing e lit. 


text-decoration: 
text-decoration: 
text-decoration: 
text-decoration: 


none 

underline 
overline 
line-thx ough 


text-transform 

A capitalizagao dos textos pode ser determinada atraves da propriedade text-transform. 


Valor 

Descrigao 

none 

Texto normal (padrao). 

capitalize 

A primeira letra de cada palavra sera transformada em maiuscula. 

uppercase 

Todas as letras do texto serao transformadas em maltlsculas. 

lowercase 

To das as letras do texto serao transformadas em miniisculas. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet. Consectetur adipiscing elit. 
Lorem Ipsum Dolor Sit Amet. Consectetur Adipiscing. 
LOREM IPSUM DOLOR SIT AMET. CONSECTUR. 
lorem ipsum dolor sit amet, consectetur adipiscing elit. 


text-transform: 
text-transform: 
text-transform: 
text-transform: 


none 

capitalize 

uppercase 

lowercase 
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text-indent 

Normalmente, indentamos a primeira linha de am blaco de texto. Podemos definir o conipri- 
mento dessa indentacao atraves da propriedade text-indent. 


Valor 

Descricao 

medida 

A medida corresponde ao tamanho da indentacao. 

x% 

O valor x e o tamanho da indentacao em porcentagem relativa a largura do ele- 
mento HTML pai. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


Lor an ipsimi dolor sit amet, consectetur adipiscmg 


Lor an ipsuni dolor sit amet, consectetur 

elit. Cras vduculabibendum arcu. 


adipisemg elit. Cras vein cola bibendum arcu 

Sed dui nulla, cursus el lacirna eu, vulputate ac 


Sed dui nulla, ctirsus el lacima eu, vulputate ac 

dolor. 


dolor. 

Quisque faucibits congue congue. 


Quisque faucibus congue congue. 


text-indent: 0 text-indent: 20px 


letter-spacing 

O espacamento entre as letras pode ser determinado atraves da propriedade letter-spacing. 


Valor 

Descricao 

normal 

Espacamento padrao definido para a fonte utilizada (padrao}. 

medida 

A medida corresponde ao espacamento extra desejado. Esse valor pode ser nega¬ 


tive. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, Consectetur adipisring elit... - > letter-spacing: normal 

Lore Ill i P snm dolor sit amet... - > letter-spacing: lOpx 

Latinipsum ckiaatametcansedrin:adpsaiigditAeneatiarisnam... -► letter-spacing: -2px 


word-spacing 

O espacamento entre as palavras pode ser determinado com a propriedade word-spacing. 


Valor 

Descricao 

normal 

Espacamento padrao definido para a fonte utilizada (padrao). 

medida 

A medida corresponde ao espacamento extra desejado. Esse valor pode ser nega¬ 


tive. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


word-spacing: 0 
-► word-spacing: 4px 
■> word-spacing: -4px 
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word-wrap 

Podemos controlar, atraves da propriedade word-wrap, conio as palavras sao divididas quando 
ocorre uma quebra de linha automatica. 


Valor 

Descri^ao 

normal 

break-word 

As palavras sao divididas apenas nos “pontos de quebras" definidos com o ele- 
mento wbr (padrao). 

As palavras podem ser divididas em qualquer ponto. 



Otoninolaringo 

logista. 


word-wrap: normal word-wrap: break-word 


line-height 

A altura das linhas de um texto pode ser determinada com a propriedade line-height. 


Valor 

Descrigao 

normal 

Altura padrao de linha (padrao). 

X 

A altura das linhas e o produto do valor xpelo tamanho da fonte atual. 

medida 

A medida corresponde a altura das linhas. 

x% 

O valor x e a altura das linhas em porcentagem relativa ao tamanho da fonte atual. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


Loron ipsum dolor sit amet, conseetetur adipisang 


Lorern ip sum dolor sit amet, conseetetur adipis dug 

eht. Cras vehiculabibendum areu. 



Sed dui nulla, cursus et lacuna eu, vulputate ao 


elit. Cras vehiculabibendum arcu. 

dolor. 



Quisque fauabus congue cougue. 


Sed dui nulla, cursus et lacuna eu. vulputate ac 


line-height: normal line-height: 20px 


white-space 

E possivel controlar a forma de tratamento dos espa^os em branco e das quebras de linha atraves 
da propriedade white-space. Os valores possiveis para essa propriedade sao: 


Valor 

Descri^ao 

normal 

Sequencias de espa^os em branco contidas no codigo HTML sao tratadas como um 
unico espa^o. As quebras de linha contidas no codigo HTML nao geram quebras de 
linha na p agin a renderizada. Quebras de linha automaticas sao inseridas qua n do 
necessario (padrao). 
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Valor 

Descri^ao 

nomap 

Sequencias de espaqos em branco contidas no codigo HTML sao tratadas como urn 
unico espaqo. As quebras de linha contidas no codigo HTML nao geram quebras 
de linlia na pagina renderizada. Nenhuma quebra de linha e inserida automatica- 

mente. 

pre 

Sequencias de espaqos em bianco sao completamente consideradas, As quebras 
de linha contidas no codigo HTML geram quebras de linha na pagina renderizada. 
Nenhuma quebra de linha e inserida automaticamente. 

pre-line 

Sequencias de espaqos em branco contidas no codigo HTML sao tratados como 
um unico espaqo. As quebras de linha contidas no codigo HTML geram quebras de 
linha na pagina renderizada. Quebras de linha automaticas sao inseridas quando 

necessario. 

pre-wrap 

Sequencias de espaqos em branco sao completamente consideradas. As quebras 
de linha contidas no codigo HTML geram quebras de linha na pagina renderizada. 
Quebras de linha automaticas sao inseridas quando necessario. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pal. 


HTML 


<div>Loreiri ip sum dolor sit amet, consectetur adipiscing elit. Cras vehicula 

bibsndunt arcu. 

Sed dui nulla, cursus et lacinia eu, vulputate ac dolor. 

Quisque faucibus congue congue .</div> 


Lorem ip sum dolor sit amet, conseetetur 
a dipt sang elit Cras vebicula bib endum 
arcu Sed dm nulla, cursus et lacinia eu, 
vulputate ac dolor. Quisque feuribus 
congue congue. 


white-space: normal 



white-space: nowzap 


Larem ipsum dolor sit amet, conseetetur at ipisemg elit Cras vehicula bibeudum arcu. 

Sed dui nulla, air sue et lacuna eu, vulputate ac dolor. 

Quisque feudbus congue congue. 


white-space: pie 


Larem ipsum dolor sit amet, conseetetur 


Lorem ipsum dolor sit amet. 

adipisting elit. Cras velicula bibendum 


coflsectetur adipisting elit. Cras vehicula 

arcu 


bibeudum arcu. 

Sed dui nulla, cursus et lacinia eu. 


Sed dui nulla, cursus et lacinia 

vulputate ac dolor. 


eu, vulputate ac dolor. 

Quisque feutibus congue congue. 


Quisque fautibus congue congue. 


white-space: pre-line white-space: pre-wrap 
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text-shadow 


Para adlcionar Lima sombra no texto de um elemento HTML, devemos utilizar a propriedade 
text-shadow, Para osar essa propriedade, devemos definir as seguintes informaqoes sobre a sobra 
desejada: a posigao horizontal, a posiqao vertical, o raio do blur e a cor. 


Deslocamento 


Esmaecimento 



horizontal 

t 


(op cion a 1) 

t 


text-shadow: 

lOpx 

lOpx 

lOpx 

ttffOOOO 



~r 


1 


Deslocamento 

horizontal 


Cor 

{optional) 


Varias soinbras podem ser aplicadas ao texto de um elemento HTML. As inforinacoes que defi- 
nem essas sombras devem ser separadas por virgula. 


text-shadow: 


lOpx 10px lOpx #ff0000 , -lOpx -lOpx lOpx ttOOOOff 


Tfexftg, Texto 

text-shadow: lOpx lOpx ttffOOOO text-shadow: lOpx lOpx lOpx ttffOOOO 

T^ste) Texto 

text-shadow: -lOpx -lOpx ttffOOOO text-shadow: -lOpx -lOpx lOpx ttffOOOO 


Texto 


Texto 


text-shadow: 0 0 lOpx ttffOOOO text-shadow: lOpx lOpx lOpx ttffOOOO, 

-lOpx -lOpx lOpx ttOOOOff 


Outras propriedades 

A linguagem CSS define mais algumas propriedades de formatacao de texto, 

* Unicode -bdi 

* hanging-punctuation 

* punctuation-trim 

* text-align-last 

* text-justify 

* text-outline 

* text-overflow 

* text-wrap 

* direction 
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* word-break 


Exercicios de Fixacao 


o No projeto css, crle um arquivo chamado textos*htmI. 



1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 
29 


< ! DOCTYPE lit ml > 
chtml lang = ' r pt-br"> 

<head> 

<meta http-equiv = JI Content-Type" coritent = " text/html ; char set = UTF-& J| > 
<title>K19 - Textos </ title> 

<li nk rel = 11 stylesheet " type=" text/css ,r href = " textos . css" > 

</head> 

<body> 

<p id="p1 ,r > 

Loren ipsun dolor sit amet, consectetur adipiscing elit, Cras 
vehicula bibendun arc j sit amet lacinia, Sed dui nulla. 

</p> 

<p id=”p2 ,r > 

Otorrinolaringoiogista. 

</p> 

<p id="p3 ,r > 

Loren ipsum dolor sit amet , 

consectetur adipiscing elit. Cras vehicula 
bibendum arcu. 

Sed 

dui nulla, cursus et lacinia eu, vulputate ac dolor, 

Quisque faucibus congue congue. 

</p> 

<p id-"p4’ r > 

Jonas Hirata. 

</p> 

</body> 

</html> 


Codi go HTML 3,10: textos. h tn 1 1 


Arquivo: https://github.com/KlS/KlS-Exercicias/archive/kCi'Z-css-fixacao9.zip 


^ No projeto css, crie um arquivo CSS chamado textos.css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 
19 


P { 

border: 2px black solid; 

1 

#pl ( 

width: 4Q0px; 

color: blue; 

text-align: justify; 

text - decorat ion: line - through; 

text-1ransform: uppercase; 

text-indent: 20px; 

letter-spacing: 2px; 

line-height: 25px; 

word-spacing: 11px; 

1 

#P2 t 

width: lOOpx; 
word-wrap: break-word; 
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20 

21 

22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 


#P3 t 

width: 4G0px; 
white-space: pre-line; 


#P4 { 

width: lQOpx; 

text-1ransform: uppercase; 
letter-spacing: 5px; 
text-shadow: 2px 2px flffOOOG; 


Codigo CSS 3.12: textos.css 


Arquivo: https: //github. com/K 19/K19-Exercicios/archive/kG2-css-f ixacaol0.zip 


O No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public.html/textos.html. 


No UbuntUp utilize o Chrome para acessar o endereco: 


http://localhcst/'<U5UARIO>/css/public_htmI/textos . html. 


Fontes 


Podemos controlar as fontes utilizadas nos textos de uma pagina web com as seguintes proprie- 
dades, 

font-family 

Uma lista com as fontes desejadas ordenadas por prioridade pode ser determinada atraves da 
propriedade font-famOy. 

1 font-family : "Arial Black 1 " , |J Georgia IJ 3 . "Courier New"; 


Event ualmente, uma determinada fonte pode nao estar dispomvel. Os navegadores devem uti- 
lizar a primeira fonte disponfvei da lista definida com a propriedade font-family. Por isso, essa lista 
deve ser ordenada da fonte com maior prioridade para a fonte corn menor prioridade. 

Algumas fontes sao consideradas seguras (Web Safe Fonts). Essa qualidade e atribmda as fontes 
que sao suportadas em praticamente todos os sistemas operacionais e navegadores. Uma lista com 
essas fontes pode ser consultada no endereco http: //cssfontstack.com/, 

A linguagem CSS classifica as fontes em 5 grupos genericos: 

* serif: Fontes serifadas. Os acabamentos nas extremidades das hastes das letras sao denomina- 
dos serifas. 

* sans-serif: Fontes nao serifadas. 

* cursive: Fontes com estilo semelhante a escrita manual. 
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fantasy: Fontes que possuem caracteres com decora^oes. 

monospace: Fontes que possuem caracteres com largura exatamente igual 
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Verdana 


Sans-serif 


Ol’TIMUS princeps 

Serif 


Unispace FWj. 


Monospace 


Cursive 


Fantasy 


Helvetica Times New Roman Courier New Comic Sans 

Sans-serif Serif Monospace ,3 ^Cursive Fantasy 


Se qualquer fonte de um determinado grupo generico pode ser utilizada, devemos adicionar o 
nome desse grupo 11a lista definida com a propriedade font-family, Nesse caso, os proprios navega- 
dores escolhem uma fonte do grupo generico escolhido. 

1 font-family: J| Ar ial Black", IJ Georgia P I "Courier New", |J sans - seri f" ; 


No exempio acima, se as fontes 'Axial Black ', "Georgia" e "Courier New" nao estiverem disponi- 
veis, os navegadores utilizarao alguma fonte do grupo sans-serif. 

font-size 


O tamanho da fonte e determinado atraves da propriedade font-size. 


Valor 

Descri^ao 

xx-small 

Tamanho de fonte extra extra pequeno. 

x-small 

Tamanho de Fonte extra pequeno. 

small 

Tamanho de fonte pequeno. 

medium 

Tamanho de fonte medio {padraoj. 

large 

Tamanho de fonte grande. 

x-large 

Tamanho de fonte extra grande. 

xx-large 

Tamanho de fonte extra extra grande. 

smaller 

U111 tamanho de fonte menor do que 0 do elemento HTML pai. 

larger 

Um tamanho de fonte maior do que 0 do elemento HTML pai. 

medida 

A medida corresponde ao tamanho da fonte. 

x% 

O valor x e 0 tamanho da fonte. Esse valor e uma porcentagem do tamanho da 
fonte do elemento HTML pai. 

inherit 

Assume 0 valor da mesma propriedade no elemento HTML pai. 
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9px - 

-► 

K19 Treinamentos 

xx-small — 

-► 

K19 Treinamentos 

x-small 

-► 

K1 9 Treinamentos 

small 

-► 

K19 Treinamentos 

medium — 

-► 

K19 Treinamentos 

large 

-► 

K19 Treinamentos 

x large 

- > 

K19 Treinamentos 

xx-large — 

-► 

K19 Treinamentos 


font-style 

Podemos deter mi oar o estilo da fonte atraves da propriedade font-style. 


Valor 

Descri^ao 

normal 

Fonte normal (padrao). 

italic 

Fonte italica. 

oblique 

Fonte obliqua. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit arnet, consectetur adipiscing eiit. -*■ font-style: normal 

Lo i 'em ipsum dolo r sit amet } con sectetu i ■ adipi sci ng elit - *■ font - s t yle: it al lc 

tm \p sum do\oE s'vt mtvfil, t GYVa fcCXftUK ft&\pYSC\Y\% fcYvt. -► font - s t yle : ob lique 

font-variant 

Para determinar que o texto de urn elemento HTML deve ser exibido em small caps, devemos 
utilizar a propriedade font-vaiant. Todas as letras de um texto em small caps sao transforrnadas em 
maiusculas e o tamanho da fonte da primeira letra de cada palavra e maior do que o tamanho da 
fonte das denials letras. 


Valor 

Descri^ao 

normal 

Fonte normal (padrao). 

small-caps 

inherit 

Fonte em small caps. 

Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit arnet, consectetur adipiscing elit. -> font-variant: normal 

Lorem IPSUM DOLOR SIT AMEX, CO NSEC TETUR ADIPISC ING E... -► f ont - var i ant : small -caps 
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font-weight 

A grossura dos caracteres pode ser definida com apropriedade font-weight. 


Valor 

Descri^ao 

normal 

Grossura normal (padrao). 

bold 

Negrito. 

100 

Grossura 100. 

200 

Grossura 200. 

300 

Grossura 300. 

400 

Grossura 400. Hquivale a a valor "normal” 

500 

Grossura 500. 

600 

Grossura 600. 

700 

Grossura 700. Hquivale ao valor "bold” 

800 

Grossura 800. 

900 

Grossura 900. 

bolder 

Uma grossura maior do que a do elemento HTML pah 

lighter 

Uma grossura menor do que a do elemento HTML pal. 

inherit 

Assume 0 valor da mesma propriedade no elemento HTML pai. 


Importante 

i! \ Normalinente, as fontes nao definem uma grossura diferente para cada lun dos possi- 
veis valores da propriedade font-weight. Por isso, geralmente, dots ou mais valores sao 
mapeados para a mesma grossura de fonte. 


font-weight 


Fonts utilizada: 

Roboto 

http ://gpogle.comfi onts/sp 0 cim e n/R 0 b ot 0 


Curiosidade: 

A fonts Roboto e a fonts padrao 
utilizada nos sistemas Android a partir 
da versao 4.0. 


K19 Treinamentos 

K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 

K1 9 Treinamentos 

K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 
K19 Treinamentos 


font-weight: normal 
font-weight: 100 
font-weight: 200 
font-weight: 300 
font-weight: 400 
font-weight: 500 
font-weight: 600 
font-weight: 700 
font-weight: 000 
font-weight: 900 
font-weight: bold 


font 

A propriedade font e um atalho para as outras propriedades de fonte. 
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1 |fontr font-style font-variant font-weight font-size/line-height font-family; 


@font-face 

A regra #font-face permite utilizar uma fonte mesmo que ela nao esteja disponivel no sistema 
operacional do usuario. A fonte pode estar ern urn arquivo local (maquina do usuario) ou renioto 
(servidor). Para cada fonte que deve ser adicionada, devemos definir uma regra font-face. Os na- 
vegadores carregam as fontes sob demanda, ou seja, somente se elas forem necessarias. Veja urn 
exemplo de utilizagao dessa regra. 

1 ©font-face { 

2 font-family: 1 K19’; 

3 src: uri (' http : //www . kl 9 . com . br/f onts / K1 9 , wof f ') ; 

4 } 


A funcao url{) deve ser utilizada quando queremos uma fonte que esta armazenada remota- 
mente. Para carregar uma fonte disponivel na maquina do usuario, devemos utilizar a funcao local!), 
passando como parametro o norne da fonte desejada. 

1 ©font-face { 

2 font-family: ’ NomeDaFonte ’ 

3 src: local (’ nome-da-fonte ') ; 

4 } 


Para utilizar as fontes definidas na regra ^font-face, basta definir a a propriedade font-family. 


1 font-family: ’NomeDaFonte 1 ; 


Os formatos de fonte suportados pelos na vegadores variam de navegador para navegador. Em 
uma regra font-face, podemos indicar a mesma fonte em varies formatos para suportar diversos 
navegadores. 

1 ©font-face ■[ 

2 font-family: 'NomeDaFonte'.; 

3 src: url (' nome -da - fonte . eot ') ; /* IE9 */ 

4 src: url('nome-da-fonte,eot?#iefix ') formatC r embedded-opentype ') , /* IE6-IE8 */ 

5 url(’nome-da-fonte.woff ") format{'woff0 T /* Navegadores Hodernos */ 

6 url(’nome-da-fonte.ttf 1 ) format(’truetype ') , /* Safari, Android, iOS */ 

7 url( p nome-da-fonte.svgtfwebfontregular') format ( r svg f ) ; /* iQS antigos */ 

3 } 


O suporte dos navegadores aos diversos formatos de fonte esta constantemente evoluindo. Ha 
diversos sites que informam de maneira atualizada quais formatos sao suportados por cada navega¬ 
dor. Recomendamos o site Can I use (http: / /can! use. com/). 

Existem diversos repositories de fontes pagas e/ou gratuitas. Podemos utilizar as fontes des¬ 
ses repositories atraves da regra font-face. Um dos repositories mais importantes e o Google Fonts 

(http: //www. google. com/fonts). 


Outras propriedades 


A linguagem CSS define mais algumas propriedades de formatacao de fonte. 
* font-size-adjust 
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* font-stretch 


Exercicios de Fixacao 


© No projeto css, crie um arquivo chamado fontes.html 



1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 


<!DOCTVPE html> 
chtml lang = ,, pt-br"> 

<head> 

<meta http-equiv=" Content-Type" content= "test/.html ; charset=UTF-8" > 
<title>K19 - Fontes</title> 

<link rel='stylesheet 3 type- r text/css’ 

href = ’http://fonts,googleapis.com/css ? family = Buteherman’> 

<link rel = r " stylesheet ,r type-" text /css " href= " fontes . css J| > 

</head> 

<body> 

<p id = " pi J| > 

Lorem ipsum dolor sit amet h consectetur adipiscing elit. Cras 
vehicula bibendum arcu sit amet lacinia. Sed doi nulla. 

</p> 

<p id = rJ p2"> 

Lorem ipsum dolor sit amet t consectetur adipiscing elit. Cras 
vehicula bibendum arcu sit amet lacinia. Sed dui nulla. 

</p> 

</body> 

</html> 


Codigo HTML 3.11: forties, h tml 


Artfltivo: https://github.cGm/K19/K19-Exercicio5/archive/k02-c5s-fixacao12.zip 


0 No projeto css, crie um arquivo CSS chamado fontes.css. 


1 

P t 

2 

border: 2px black solid; 

3 

1 

4 


5 

#pl { 

6 

width: 400px; 

7 

font-family: "Arial Black", "Georgia", "Courier New", "sans-serif"; 

3 

font-size: xx-large; 

9 

font-style: italic; 

10 

font-variant: small-caps; 

11 

font-weight: bold; 

12 


13 


14 

#P2 f 

15 

width: 400px; 

16 

font-family: 'Butcherman ' ; 

17 

1 


Codigo CSS 320: fontes.css 


Arquivo: https://github.com/K19/K19-ExerciciQ5/archive/k02-c5s-fixacao13.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/fontes,html. 
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No Ubuntu, utilize o Chrome para acessar o endereco: 

http://localhost/~<U5UARIO>/css/public_html/fantes.htmL 


Listas 


Podemos controlar a formatagao das listas com as seguintes propriedades. 

list-style-type 

Podemos definir o smibolo utilizado nos itens de uma determinada lista com a propriedade list- 
style-type. A listagem completa desses simbolos pode ser consultada no enderego http: //www. w3. 
org/TR/css3-l is ts/#ua-style sheet. Veja alguns possiveis valores da propriedade list-style-type. 


Listas sem ordem 


* K19 Treinamentos 

o K19 Treinamentos 

■ K19 Treinamentos 

* K19 Treinamentos 

o hi 9 Treinamentos 

■ K19 Treinamentos 

* K19 Treinamentos 

° hi9 Treinamentos 

■ K19 Treinamentos 

[ disc ] 

[ circle | 

[ square | 



1. K19 Treinam entos 

1. K19 Treinamentos 

i. K19 Treinamentos 

2. hi 9 Treinamentos 

II K19 Treinamentos 

ii. hi9 Treinamentos 

3. K19 Treinamentos 

|[|. K19 Treinamentos 

lii. hi9 Treinamentos 

[ decimal | 

[ upper-roman | 

[ lower-roman ] 

A. hi9 Treinamentos 

a. K19 Treinamentos 

k. K19 Treinamentos 

B. K19 Treinamentos 

b. K19 Treinamentos 

1. K19 Treinamentos 

C. K19 Treinamentos 

c. K19 Treinamentos 

K19 Treinamentos 

[ upper-alpha ] 

{ lower-alpha | 

[ hebrew ] 

d. K19 Treinamentos 

T 7 . K19 Treinamentos 

— . K19 Treinamentos 

p. K19 Treinamentos 

< K19 Treinamentos 

K19 Treinamentos 

V- K19 Treinamentos 

*>. hi9 Treinamentos 

K19 Treinamentos 

[ lower-gieek ] 

[ katakana | 

f cjk-ideographic | 

_ 


list-style-image 

E posslvel definir uma imagem para ser utilizada nos itens de uma determinada lista com a pro- 
pxiedade list-style-image. 


Valor 

Descri^ao 

url Curl") 

URL da imagem. 
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Valor 

Descri^ao 

none 

Sem Image m (padrao). 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


- K19 Treinamentos 

* K19 Treinamentos 

* K19 Treinamentos 


-> 


list-style-image: url(' estrela.png') 


list-style-position 

Por padrao h os bullets de urrta lista nao sao exibidos dentro dos boxes dos itens. Podemos alterar 
esse comportamento at raves da propriedade list-style-position. 


Valor 

Descrifao 

inside 

Os bullets sao exibidos dentro dos boxes dos itens. 

outside 

Os bullets nao sao exibidos dentro dos boxes dos itens. (padrao). 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 



list-style 

A propriedade list-style e um atalho para as outras propriedades de lista. 


1 list-style: list-style-type p list-style-position r list-style-image 



Exercicios de Fixa^ao 


© 


No projeto css> crle um arquivo chamado list as, html 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 


<!DOCTYPE html> 

<html lang = ' r pt-br "> 

<head> 

<meta http-equiv = J| Content-Type" content-” text/htjnl ; charset=UTF-S " > 
<title>K19 - Listas</title> 

<link rel = ” stylesheet" type=” text/css " href = " li stas . css " > 

<7head> 

<body> 

< u 1 i d = 11 u 11 ,r > 

<li>K01 - Logica de Prograjnag-ao</li> 

<li>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
<li>K03 - Modelo Relacional e SQL</li> 
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13 

</ul> 

14 


15 

< u 1 i d = ■" u 

16 

<li>K01 

17 

<li>K02 

18 

<li>K03 

19 

</ul> 

20 


21 

<ol> 

22 

<1i>K0T 

23 

<li>K02 

24 

<li>K03 

25 

</ol> 

26 

</body> 

27 

</html> 


Logica de Programagao</li> 
Desenvolvimento Web com HTML, 
Modelo Relacional e SQL</li> 


e JavaScript</li> 


e JavaScript</li> 


Codigo HTML 3.12: lisras.html 


Arqiliva: https://github.com/K1S/K19-Exercicios/archive/k02-css-fixacao15. zip 


^ No projeto css, crie um arquivo CSS chamado listas.css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 


li t 

border: 2px black solid; 
width: 400px; 

} 

# u 11 L 

list-style-type : square; 
list - style-pos i tion : inside; 

1 

#ul2 i 

list- style-image: url( r http: //kl9 . com, br/f igs/k02 -logo-small, png ') ; 

} 

ol i 

list-style-type : upper-roman; 

} 


Codigo CSS 3,22: Usuis, css 


Arquivo: https://github.com/l(19/K19-Exercicio5/archive/k02-css-fixacaol6.zip 


© 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publicjrtml/listas.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/css/public_html/listas . html. 


Bordas 


A linguagein CSS possui diversas propriedades para definir a formata^ao das bordas dos elemen¬ 
ts HTML. 
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border-style 

Podemos definir o estilo das bordas de um eleraento HTML com a propriedade border-style. Veja 
os principals valores dessa propriedade. 



dotted 


groove 



dashed 



ridge 




inset 


double 



outset 


border-width 

A grossura das bordas pode ser determinada com a propriedade border-width. 


Valor 

Descri^ao 

thin 

Borda fina. 

medium 

Borda media (padrao). 

thick 

Borda grossa. 

medida 

A medida corresponds a grossura da borda. 

inherit 

Assume o valor da lnesrna propriedade no elemento HTML pai. 


□ □ □ 

thin medium thick 

border-color 

A propriedade border-color define a cor das bordas de um elemento HTML, Essa propriedade 
aceita o valor transparent (padrao) on qualquer cor CSS. 


Valor 

Descri^ao 

color 

Uma cor CSS, 

transparent 

Faz a borda ser transparente. 

inherit 

Assume o valor da mesrna propriedade no elemento HTML pai. 
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border 

A propriedade border e urn atalho para as propriedades que definem o estilo, a grossura e a cor 
das bordas dos elementos HTML. 


1 border : border-width border-style border-color ; 


border-left - 3 * 1 border-top-* border-right-* border-bottom-* 

O estilo, a grossura e a cor podem ser definidos individualmente para a borda da esquerda, borda 
superior, borda da direita e borda inferior de um elemento HTML. Veja o exemplo a seguir. 



border-width: lOpx; 

border-top-style: dashed , 1 
border-top-color: blue; 

border-right-style: solid; 
border-right-color: green; 

border-bottom-style: groove; 
border-bottom-color: orange; 

border-left-style: dotted; 
border-left-color: red; 


border-left border-top border-right border-bottom 

As propriedades border-left, border-top, border-right e border-bottom sao ataihos para as pro- 
priedades que definem in dividual mente o estilo, a grossura e a cor das bordas da esquerda, superio¬ 
rs, da direita e inferiors dos elementos HTML, Veja alguns exemplos: 



border-top: lOpx dashed blue; 
border-right: lOpx solid green; 
border-bottom: lOpx groove orange; 
border-left: lOpx dotted red; 


border-radius 

Bordas com cantos arredondados podem ser definidas com a propriedade border-radius. 


8KI9 www. f ac ebook. com/k 191rei nam entos 


181 














css 


182 


Valor 

Descri^ao 

medida 

A medida corresponde ao raio. 

x% 

O valor xeo raio em porcentagem. 


n 


10px 1Opx 

1Qpx 1Opx. 


border-radius: IGpx 



border-radius: IGpx 5px 




border-radius: lOpx 5px 2Gpx border-radius : lOpx 5px 2Qpx 3px 


border-*- * -radius 


As propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius 
e border-bottom-left-radius sao utilizadas para definir o arredondamento das bordas dos cantos 
superior esquerdo, superior direito, inferior direito e inferior esquerdo respectivamente. Veja alguns 
exemplos: 




border-top-left-radius: IGpx border-top-right-radius: IGpx 




border-bottom-right-radius: lOpx border-bottom-left-radius: lOpx 
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border-collapse 

Podemos definir bordas para cada celula de uma tabela e para a propria tabela. For padrao, essas 
bordas sao exibidas separadamente. Mas, e possivel detenninar que duas bordas "vizinhas" sejam 
exibidas como se fossem uma so com a propriedade border-collapse. 


Valor 

Descri^ao 

separate 

Bordas separadas (padrao). 

collapse 

inherit 

Bordas unidades. 

Assume o valor da mesma propriedade no elemento HTML pai. 


Celula 1 

Celula 2 

Celula 3 

Celula 4 


border-collapse: separate 


Celula 1 

Celula 2 

Celula 3 

Celula 4 


border-collapse: collapse 


border-spacing 

A propriedade border-spacing permite definir o espacamenio entre as celulas de uma tabela. 
Essa propriedade afeta o espagamento entre as bordas somente se o valor da propriedade border- 
collapse for separate. 


Valor 

Descri^ao 

medidal mcdidaZ 

A medidal corresponde ao espa^amento horizontal e a corresponde 


ao espaqiamento vertical. 

medida 

A medida corresponde ao espa^amento horizontal e vertical. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


Celula 1 

Celula 2 

Celula 3 

Celula 4 


border-spacing: 5px 



border-spacing: lOpx Spx 


Outras propriedades 

A linguagem CSS define mais algumas propriedades de formataqao de bordas. 

* border-image 

* border-image-outset 

* border-image-repeat 

* border-image-slice 

* border-image-source 

* border-image-width 
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Exercicios de Flxa^ao 


© No pro] e to css, crie um arquivo chamado bordasJitml. 


1 

<!DOCTYPE html> 

2 

<html lanE = ,l pt-br' r > 

3 

<head> 

4 

<meta http-equiv^" 1 Content-Type* content= " text / html ; charset-UTF-8" > 

5 

<title>K19 - Bordas</title> 

6 

<1 ink re 1 = " stylesheet <r type= n t ext/css" href = " bordas . css " > 

7 

</head> 

S 

<body> 

9 

<div id = r ' divl '■ ></div> 

10 

<div id=” div2" ></div> 

11 

<div id^" 1 div3" ></div> 

12 

<div id=" div4 J| ></ div> 

13 

<div id-" div5 ,l x/div> 

14 


15 

<table id-" tabelal "> 

16 

<tr> 

17 

<td>K01</td> 

18 

<td>K02</td> 

19 

<td>K03 </td> 

20 

</tr> 

21 

</table> 

22 


23 

<table id= "tabela2 "> 

24 

<tr> 

25 

<td>K01</td> 

26 

<td>K02</td> 

27 

<td>K03</td> 

28 

</tr> 

29 

</table> 

30 

</body> 

31 

</html > 


Codiga HTML 3 A 3: bordas.htmf 


Arquivo: https: //github.com/Kl9/K19-Exerc£cios/archive/k02-css-f ixacaolfl. zip 


^ No projeto css, crie um arquivo CSS chamado bordas.css. 


1 

div { 


2 

width: 2Q0px; 


3 

height: 1 DO px; 


4 

margin: lOpx; 


5 

1 


6 



7 

#div1 { 


8 

border-style: 

solid; 

9 

border-width: 

thin ; 

10 

border-color: 

red; 

11 

border-radius: 

: 1 0 px ; 

12 

1 


13 



14 

#div2 { 


15 

border-style: 

dotted 

16 

border-color: 

yellow 

17 

border-radius: 

: lOpx 

IS 

1 


19 



20 

#div3 { 
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21 

22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 

44 

45 

46 

47 
43 

49 

50 

51 

52 

53 

54 

55 

56 

57 
53 

59 

60 
61 
62 

63 

64 

65 

66 


border-style : dashed; 

border-width: 4px; 

border-color: blue; 

border-radius: lOpx 20px 30px 40px; 


#div4 { 

border-style: double; 

border-width: flpx; 

border-color: green; 

border-top-left - radius: lOpx; 

border-top-right-radius: 20px; 

border-bottom-right-radius: 30px; 

border -bottom-lett-radius: 40 px; 


#div5 { 

border-left - style: solid; 
border-left-width: thin; 
border-left-color: red; 

border-top-style: dotted; 
border-top-color: yellow; 

border-right-style: dashed; 
border-right-width: 4px; 
border-right-color: blue; 

border-bottom - style: double; 
border-bottom-width: 8px; 
border-bottom-color: green; 


table , td { 

font-size: xx-large; 
border: 1px solid black; 
margin: lOpx; 


#tabelal { 

border-collapse: collapse; 

1 

# tab-el a2 -[ 

border-spacing: 20px; 

1 


Codigo CSS 3.24: botdas.css 


Arquivo: https://github.com/K!S/K19-Exercicios/archive/k02-css-fixacao19.zip 


0 No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publicjitrail/bordas . html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/'<U5liARIO>/css/public_html/bordas. html. 


*# Outline 
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O box de urn elemento HTML pode ser contornado por uma linha denominada outline. Essa 
linha nao afeta as dimensoes dos boxes. A linguagem CSS possui divers as propriedades para definir 
a formata^ao do outline dos elementos HTML. 


outline-style 

Podemos definir o estilo do outline de um elemento HTML com a propriedade outline-style. Veja 
os principals valores dessa propriedade. 



dotted 


£ ? 
£ ? 





dashed 


solid 


double 



groove 



ridge 



inset 



outset 


outline-color 

A propriedade outline-color define a cor do outline de um elemento HTML. 


Valor 

Descri^ao 

color 

Uma cor CSS, 

invert 

A cor inversa a cor do background (padrao). 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


outline-width 

A grossura dos outlines pode ser deter in inada com a propriedade out line-width. 


Valor 

Descrr^ao 

thin 

Outline lino. 

medium 

Outline medio (padrao). 

thick 

Outline grosso. 

medida 

A medida corresponde a grossura do outline. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 
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CSS 


thin 



medium 



outline-offset 


Podemos definir a distancia do outline de um elemento HTML em relagao as bordas do mesmo 
com a propriedade outline-offset. 


Valor 

Descrigao 

medida 

A medida corresponde ao tamanho do outline-offset (Opx e o valor padrao). Esse 
valor pode ser negative. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, consectetur adipiscmg 
elit. Aliquam ac aims an w till ml A dilmi sit amet 
bibendum. Aliquam sec 
placerat suscipit turpi s in 


ellus. Duis 
Nunc lacus 

magna, auctor vitae venenatis eu, dictum ac augue. 


[temp on 
follici til dill 


Lorem ipsum dolor sit amet, consectetur adipiscmg 
elit. Aliquam accumsan vehicula diarn sit amet 
bibendum. Aliquam sed 4empoi i tellus Duis 
placerat suscipit turpis in sollicitudm. Nunc lacus 
magna, auctor vitae venenatis eu, dictum ac augue. 


outline-offsets lOpx 


outline-offset: -5px 


outline 

A propriedade outline e um atallio para as propriedades outline-color, outline-style e outline- 
width, Veja a sintaxe dessa propriedade. 

1 outline: out line-color outline-style outline-width; 



Exercicios de Fixa^ao 


© No projeto css, crie um arquivo chamado outlines, html. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 


<!DOCTYPE html> 

<html lang^' pt-br'' > 

<head> 

<meta http-equiv=" Content-Type IJ content^" text/html ; charset = UTF-S'" > 
<title>K19 - Qutlines</titie> 

<link re 1 = " stylesheet ,r type =" text /css Jr href= " outlines . css "> 

</head> 

<body> 

<div id-" divl " ></div> 

<div id-"div2''x/div> 

<div id-" div3 ,r x/div> 

</body> 

</html> 


Codigo HTML 3.14; outlines.html 
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Al'CJUiVO: https://github.com/K197K19-Exercicio5/archive/k02-css-fixacao21 .zip 


© No projeto css, crie um arquivo CSS chamado outlines .css. 


1 

div { 

2 

width: 2Q0px; 

3 

height : 100px; 

4 

border: 4px solid black; 

5 

margin: 50px; 

6 

1 

7 


3 

#div1 { 

9 

outline-style: solid; 

1C 

outline-color: red; 

11 

outline-width: 4px; 

12 

} 

13 


14 

#div2 { 

15 

outline-style: dashed; 

16 

outline-color: blue; 

17 

outline-width: 2px; 

18 

outline-offset: -20px; 

19 

} 

20 


21 

#div3 { 

22 

outline-style: solid; 

23 

outline-color: green; 

24 

outline-width: 4px; 

25 

outline-offset: 20px; 

26 

} 


Codigo CSS 326: outlines.css 


Arquivo: https://github.com/KI9/K19-Exercicios/archive/k02-css-fixacao22.zip 


© 


No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/css/public_htinl/outlines .html. 

No Ufountu, utilize o Chrome para acessar o enderego: 


http:/ /loca 1host/ ~< USUARIO>/css/ pub lic_ht ml/out lines. htmL 


Sombras 


A propriedade box-shadow permite adicionar sombras externas e internas nos boxes dos ele- 
mentos HTML. O valor dessa propriedade pode ser definido de diversas maneiras. Confira, nas ima- 
gens abaixo, algumas formas de utiliza^ao da propriedade box-shadow para definir sombras exter¬ 
nas. 
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CSS 


#a 


( 

box-shadow: 


D e s I o came nto h o n zo nta! 


lOpx lOpx 


# 7 f 7 f 7 f ; 


Deslocamenta vertical 



Deslocamento horizontal 


ttb { 


box-shadow: 


#c { 


box-shadow: 



Os valores dos deslocamentos vertical e horizontal podem ser negativos fazendo com que a som- 
bra externa seja projetada para cima e para a esquerda. 

As regras para definir uma da sombra interna sao praticamente as mesnias da sombra externa, A 
unica diferen^a e que devemos come^ar a atribuigao do valor com a palavra inset. 


Deslocamento horizontal 


#a { 

box-shadow: 

y 


Deslocamento vertical 


inset 


lOpx lOpx 


# 000000 ; 
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Deslocamento horizontal 


#b { 


box-shadow: inset 



#c 

} 


Deslocamento horizontal 




box-shadow: inset 


H I P-l 


Deslocamento vertical 


lOpx 

lOpx 

0 

lOpx 


Esmaecimento 


a 


# 000000 ,' 




ff 



h 


Propagagao 



Exercicios de Fixacao 


© 


No projeto css, crie um arquivo chamado sombras.html. 


1 < ! DOCTVPE htjfil > 

2 <htm 1 lang=" pt-br" > 

3 <head> 

4 <meta http-equiv=" Content-Type" content^ * 1 ' test/html ; charset=UTF-8 J| > 

5 <title>K19 - Sombrasc/title> 

6 <link rel=" stylesheet " type=" text / css" href=" sombras . css ”> 

7 </head> 

3 <body> 

9 <dlv id=" divl "></div> 

10 <div id = ™ div2 Jl ></div> 

11 <div id=" div3 "></div> 

12 <div id-" 1 div4'' ></div> 

13 </body> 

14 </html> 


Codigo HTML 3,15: sornbmsJitm! 


ArquiUO: https://github.com/Kl9/Kl9-Exercicios/archive/k02-css~fixacao24.zip 


@ No projeto css, crie um arquivo CSS chamado sombrasxss. 


1 

2 

3 

4 

5 

6 
7 
3 


div { 

width: 200px; 
height : 100 px; 
border:; 4px solid black; 
margin: 50px; 

1 

#div1 { 
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CSS 


9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 


box-shadow: 

} 

#div2 { 

box-shadow: 

} 

#div3 { 

box - shadow : 

#div4 { 

box-shadow : 

1 


lOpx 5px gray; 


lOpx 5px 5px gray; 


inset lOpx lOpx gray; 


inset lOpx lOpx 5px gray; 


Codigp CSS 3.27: sombras.css 

Arqutuo: https://github.com/K19/K19-Exercicios/srchive/k02-css-fixacao25.zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publicjrtrail/sombras.html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


http: //localhost/~<USUARIO>/css/public_html/sQmbras. html. 


Margens 


A linguagem CSS possui diversas propriedades para definir a formalagao das margens intemas e 
externas dos elementos HTML. 


margin-* 

Os tamanhos das margens externas do box de elemento HTML podem ser definidos individual- 
mente com as propriedades margin- left, mar gin-top, margin-right e margin-bottom. 


Valor 

Descri^ao 

auto 

O tamanho da margem e calculado automatte amen te pelos navegadores. 

medida 

A medida corresponde ao tamanho da margem (Opx e o padrao). 

x% 

O valor x corresponde ao tamanho da margem, Esse valor e uma porcenta- 


gem da largura do elemento HTML pai. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 
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margin-top: 5px 
margin-right: lOpx 
margin-bottom: 15px 
margin-left: 20px 


margin 



A propriedade margin e um atalho para as propriedades margin-left margin-top, margin-right 
e margin-bottom, Podemos utilizar a propriedade margin de 4 formas diferentes: 


margin: 5px lOpx 15px 20px 


margin: 5px lOpx 15 px 



margin: 5px lOpx 


margin: 5px 


padding-* 

Os tamanhos das margens internas do box de elemento HTML podem ser defmidos individual- 
niente com as propriedades padding-left, padding-top, padding-right e padding-bottom. 


Valor 

Descri^ao 

mcdida 

A medida corresponde ao tamauho da margem (Opx e o padrao). 

x% 

O valor x corresponde ao tamanho da margem. Esse valor e uma porcenta- 
gem da largura do elemento HTML pai. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 
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CSS 


yyyyyy. 



/ //y 

■’ / // / / // 

Lorem Ipsum dolor ! 

vyyy. y y y / y.- 

sit amet, consectetur / 



-adipiscing el it. Duis volutpat laoreet magna,. 


i*// / / / / 

nec placerat nisi egestas id. Maecenas a/ 


nulla vel arcu viverra lobortis. In ligula nunc,- /XQpx 
'/..cursus non faucibus sed, hendrerit id est./ . •’ / 

7////// 

/^Maecenas felis neque, porta et sagittis'/-" 

■■ , ■ 

/•faucibus, fringilla id tellus, Etiam nec// 


yyyyy 

/'pulvinar tellus, Mauris et diam at est cursus// 


"/"egestas, Donee tincidunt metus non ante-'/'.. 
,t ristigue egestas. "V 

y/y 


y/yy 

1 



/yyyyvvy y// 

1 ^yLy\/yyyyy 


/ / / / / / / 


t4Yyy/-y// / y 



padding-top: 5px 
padding-right: lOpx 
padding-bottom: 15px 
padding-left: 20px 


padding 

A propriedade padding e urn atalho para as propriedades padding-left padding-top ? padding- 
right e padding-bottom. Podemos utilizar a propriedade padding de 4 formas diferentes: 


v/fy//, | 5px V y/yyC 

re m" i ps u m' dolor sdt a met; c □ n s ec (e (u r-'" / /\// 
' adipiscing elit Duis volulpat l-aoneet magna, /// 
• nec placerat nisi egestas id, Maecenas a 
2 OpX nulla vel ajcu vwerra lobortis. In ligula nunc, l.ftpx 

_^cursus non faucibus sed, hendrerit id Ml. 7 ■-' 

""^rAaecenas Felis neque, porta et sagit^i s ^ .■ " 

Faucibus, rringilla id teltus. Eliam nec •' 
puivinar tellus. Mauris el diam al esl guisus 
/' egestas. Donee tinddunt meins nan ante ' 

'. •• rristique eosstas. 






i5px/vy 


/Z 



padding: 5px lOpx 15px 20px 


padding: 5px lOpx 15px 


\5px 




La ram ip sum dolor sit amet, consectetur 
/ adipiscing elitDuis volulpaMaoreet magna,/ ' 
nec placerat nisi egestas id. Maecenas a 
IOjjx n ' J l la vel arcu viverra lobortis. In lig ula nunc, 1 (Jpx 
. . cursus non Faucibus sed, hendrerit id esT. a 

^••'X/^Waecenas Felis neque, porta et lagirts^'yy'Sl 
Faucibus, rringilla id tellus. Eliam nec " 
/puhrinar tellus. Mauris el diam al esl corsui,-' 
egestas. Donee tincidunt metus non ante 
• tristique egestas. 



"torairn ipa™ dolor *it cto'x-t::.-.,- m 
adipiscing eht. Duhs volutpal Jaoreet magna, , 

. nec placerat nisi egestas id. Maecenas a',-- 
5 jjx rvulla vel arcu viyerra lobonis. In ligula nunc, j 

_cursus non faucibus sed, hendrerit id est-/ 

///Maecenas Felis neque, porta et sagiltis- 
' .'’""faucibus, fringilla id tellus. Etiarn nec" 
puhrinar Tellus. Mauris et diam al est cursus 
egestas. Donee tincidunt metus non ante. " 
tristique egMlas. // / a 

' .t- _ J 


padding: 5px lOpx 


padding: 5px 


Mais Sobre 

Considere o seguinte exemplo. 


h <div id = ,r div1 r '> 

2 <div id = ,r div2 rj >... </d i v> 

3 <div> 


1 |#div2 C 
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2 width: 50%; 

3 } 


Podemos utilizar as propriedades de margem para alinhar de forma centralizada na horizontal o 

div2. 


1 

2 

3 

4 

5 




Exercicios de Fixa^ao 


@ No projeto css, crie um arquivo chamado margens.html 


1 <!DOCTYPE htffll> 

2 <htm 1 lang = ' r pt-br ir > 

3 chead> 

4 cmeta http-equiv = "Content-Type" content=" test/html ; charset=UTF-B" > 

5 ctitle>K19 - Margensc/title> 

6 clink rel = w stylesheet ,r type = l 'text/css" href='" marge ns , css "> 

7 c/head> 

8 cbody> 

9 <div> 

10 cp id = |J pi J| >K1 9</p> 

11 <a id = " al !r href- n #">k1 9</a> 

12 <a id = n a2 ,r href =">kl 9</a> 

13 <p id=" pZ" >K19C/p> 

14 c / d i v > 

15 c/body> 

16 C/html> 


Codigo HTML 3.17: margens.html 


Arquivo: https: //github. coii/K 1S/K1 9-Exercicio5/archive/kG2-css-fixacao27.zip 


© 


No projeto css, crie um arquivo CSS chamado margensxss. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 


div { 

width: 600px; 

border: 1 px solid black; 

1 

P, a L 

border: 1px solid black; 

} 

#p1 { 

margin: 5px lOpx 20px 30px; 
padding: 5px Opx Opx 20px; 

} 

#a1 { 

margin-left: lOpx; 
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17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 


padding: 5px; 

} 

#a2 { 

margin-left: 20px; 
padding: lOpx; 

1 

#P2 { 

margin: 20px; 
padding: lOpx; 

1 


Cddiga CSS 330: margenscss 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao28.zip 


@ No Windows., utilize o Chrome para acessar o endere^o: 


http://loca1host/css/public_html/margens.html. 

No Ubuntu, utilize o Chrome para acessar o endere^o: 


http: //loca 1 host/-CUSUARHWcss /publicjitml/margens. html. 


*!?P Altura e Largura 


A linguagem CSS possui algumas propriedades para controlar a largura e a altura dos elementos 
HTML. 

height e width 

A altura e a largura dos boxes dos elementos HTML podem ser definidas com as propriedades 
height e width respectivamente. 


Valor 

Descrl^ao 

auto 

A altura ou largura sao cal cu lad as automat icamente pelos navegadores. 

medida 

A medida corresponde a largura ou a altura. 

x% 

A medida corresponde a largura ou a altura como porcentagem das dimensoes do 


elemento HTML pai 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


miti-height e max-height 

A propriedade height e utilizada para determinar a altura exata do box de um elemento HTML. 
Uma outra abordagem e definir um limite inferior e/ou um limite superior para essa dimensao. Esses 
limites podem ser definidos com as propriedades min-height e max-height. 


Valor 

Descri^ao 

none 

Sem valor (padrao para max-height). 

medida 

A medida corresponde a altura maxima ou minima desejada (Opx e padrao para 

min-height). 
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Valor 

Descri^ao 

x.% 

O valor x correspond© a altura maxima on minima. Esse valor e uma porcentagem 
da altura do elemento HTML pal 

inherit 

Assume o valor da mesma propriedade no elemento HTML pal. 


min-width e max-width 

A propriedade width e utilizada para determinar a largura exata do box de um elemento HTML. 
Uma outra abordagem e definir um limite inferior e/ou um limite superior para essa dimensao, Esses 
Hmites podem ser definidos com as propriedades min-width e max-width. 


Valor 

Descri^ao 

none 

Sem valor (padrao para max-width). 

medida 

A medida corresponde a largura maxima ou minima desejada (Opx e padrao para 


min-width). 

x% 

O valor x corresponde a largura maxima ou minima. Esse valor e uma porcentagem 


da largura do elemento HTML pal 

inlierit 

Assume o valor da mesma propriedade no elemento HTML pai. 



Exerclcios de Fixa^ao 


No projeto css, crie um arquivo chamado altura-largura.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 


< ! DGCTTPE html > 

<html lang = ’ r pt-br"> 

<head> 

<meta http-eq>uiv = "Content-Type" content-" text/html ; charset=UTF -B" > 
<title>K19 - Altura e Largura</title> 

<Iink rel= l ' 1 stylesheet" type = l# text /css " href=" altura-largura . css ,[ > 

</head> 

<body> 

<p id— "pT"> 

Loren ipsun dolor sit amet , consectetur adipiscing elit. In 
mollis, nibh et tempor soliicitudin , orci loren iaculis sem, 
sit amet sodales quan nassa sit amet risus. Fusee malesuada 
eleifend nassa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

<p id = |J p2 J| > 

Loren ipsun dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor soliicitudin, orci loren iaculis sem, 
sit amet sodales quan nassa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi ferraientum vitae, Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

<p id = |J p3"> 

Loren ipsun dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor soliicitudin, orci loren iaculis sem, 
sit amet sodales quan nassa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

</body> 

</html> 


Codigo HTML 3.18: al£ura-iargura.html 
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Ai'CJUiVO: https://github.com/K19/K19-Exercicio5/archive/k02-css-fixacao30.zip 


© No projeto css, crie um arquivo CSS chamado altura-1 argura.css. 


1 

P ( 

2 

border: 1 px solid black; 

3 

max-width: 600px; 

4 

max-height: 250px; 

5 

min-height: lOOpx; 

6 

1 

7 


3 

#pl { 

9 

width: 200px; 

10 

1 

11 


12 

#P2 { 

13 

width: 400px; 

14 

1 


Codigo CSS 3.31: aitum-laTgum.css 


Arquivo: https://github,com/KI9/K19-Exercicios/archive/k02-css-fixacao31 . zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http://loca1host/css/public_html/aItura-largura.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/^USUARIOo/css/public.html/altura-largura.html. 


Display e Visibilidade 


A linguagem CSS possui algumas propriedades para controlar a forma de exibi^ao e a visibilidade 
dos elementos HTML. 


display 

A propriedade display define a forma de exibi^ao dos elementos HTML. Os 5 principals valores 
dessa propriedade sao: inline (p ad rao)> block, inline-block, list-item e none. 


Valor 

Descri^ao 

inline 

Considere o box de um elemento HTML com display: inline. Esse box nao gera 
quebras de linha e as suas dimensdes sao calculadas com base no conteudo do ele¬ 
mento HTML. As propriedades width e height nao modificam a largura e a altura 
do box. As mar gens e as bordas do box de um elemento HTML com display: inline 
"empurram" os boxes vizinhos horizontalmente. Verticalmente, os boxes vizinhos 
nao sao “empurrados”. 

block 

Considere o box de um elemento HTML com display: block. Esse box gera quebras 
de linha e p par padrao, ocupa todo o espa^o horizontal do elemento pal. Podemos 
controlar a largura e a altura desse box com as propriedades width e height. 
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Valor 

Descri^ao 

inline-block 

O comportamento dos boxes dos elementos HTML com display: inline- block e 
similar ao dos boxes dos elementos HTML com display: inline. Basicamente, a 
diferen^a entre eles e que podemos modificar a largura e altura dos boxes dos ele¬ 
mentos HTML com display: inline-block. 

list-item 

O comportamento dos boxes dos elementos HTML com display: list-item e similar 
ao dos boxes dos elementos HTML com display: block. Basicamente, a diferenca 
entre eles e que um bullet e exibido no canto esquerdo de box de um elemento 
HTML com display: list-item. 

none 

Os boxes dos elementos HTML com display: none nao sao exibidos e nao ocupam 
espaqo na pagina. 


Lorem ipsum dolor sit amet* consectetur adipiscm 
amet bibendum Aliquam sed temp or tellus. Du is 
Nunc lacus magna, auctor vitae venenatis eu, dictur 

■g elit Aliqu; 

placer at 
i ac augue T 

im accumsan vehicula diam sit 
suscipit tuipis in sollicitudin 
unc eleifend digmssim felis 

display: inline 


Lorem ipsum dolor sit amet T consectet.ur adipiscing el it Aliquam accumsan vehicula diam sit 
amet bibendum Aliquam sed temp or tellus Du is 


placer at 

suscipit tuipis m sollicitudin Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. 
Nunc eleifend digmssim fell s. 


display: block 


Lorem ipsum dolor sit amet, consectet.ur adipiscing elit Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed temper tellus. Du is 


placer at 


suscipit tuipis m sollicitudin 


Nunc lacus magna, auctor vitae venenatis eu 5 dictum ac augue Nunc eleifend dignissim felis 


display: inline-block 


Lorem ipsum dolor sit amet, consectet.ur adipiscing elit Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed temper tellus. Du is 


placer at 


suscipit tuipis m sollicitudin Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. 
Nunc eleifend digmssim felis. 


display: list-item 
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Lorem ip sum dolor sit amet, consectetur adipiscmg elit Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed temper tellus Duis suscipit turpis m sollicitudm Nunc lacus 
magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend digmssim felis. 


display: none 


visibility 

Podemos determinar se urn elemento HTML deve ser exibido ou nao atraves da propriedade 
visibility, O valor visible (padrao) indica que o elemento deve ser exibido e o valor hidden indica que 
o elemento nao deve ser exibido. 


Valor 

Descrigao 

visible 

Vislvel (padrao). 

hidden 

inherit 

Invislvel. 

Assume o valor da mesma propriedade no elemento HTML pai. 


Lorem ipsum dolor sit amet, consectetur adipiscin g e lit Aliqua m accumsan vehicula diam sit 
amet bibendum. Aliquam sed temper tellus. Duis placerat suscipit turpis in sollicitudm 
Nunc lacus magna, auctor vitae venenatis eu, dictu m ac augue N unc eleifend digmssim felis 


visibility: visible 


Lorem ipsum dolor sit amet, consectetur adipiscmg elit Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed temper tellus. Duis suscipit turpis in sollicitudm 

Nunc lacus magna, auctor vitae venenatis eu, dictum ac augue. Nunc eleifend digmssim felis 


visibility: hidden 


Import ante 

Na renderizagao, os elementos HTML com display: none sao totalmente desconside- 
rados. Em outras palavras, e como se eles simplesmente nao existissem. Dessa forma, 
eles nao afetam o posicionamento dos demais elementos. Por outro lado, os elementos HTML 
com visibility: hidden apesar de nao serein exibidos fazem parte da pagina renderizada e po- 
dem afetar o posicionamento dos demais elementos pois o espago ocupado por eles pode nao 
ser nulo. 


Lorem ipsum dolor sit amet, consectetur adipiscmg elit Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed temp or tellus. Duis suscipit turpis in sollicitudm. Nunc lacus 
magna, auctor vitae venenatis eu, dictum ac augue Nunc eleifend digmssim felis. 


display: none 
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Lorem ipsum dolor sit amet, consectetur adipiscing elit Aliquam accumsan vehicula diam sit 
amet bibendum. Aliquam sed temp or tellus. Du is suscipit turpis in sollicitudin. 

Nunc lacusmagna, auctor vitae venenatis eu P dictum ac augue. Nunc eleifend dignissim felis 


visibility: hidden 



Exercicios de Fixacao 




No projeto css, crie urn arquivo chamado di splay-visibilidade*html. 


1 

<!DOCTVPE html> 

2 

< h t m 1 lang = ir pt -br Pl > 

3 

<head> 

4 

<meta http-equiv = " Content-Type" content=" text/html ; charset = UTF -B " > 

5 

<title>K19 - Display e Visibi1idade</title> 

6 

<link rel= 11 stylesheet ir type= n text /css " href=" display-visibilidade.css "> 

7 

</head> 

S 

<body> 

9 

<P> 

10 

Lorem ipsum dolor sit amet h <span id=" spanl" >inline</span> 

11 

adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 

12 

1 3 

</p> 

14 

<p> 

15 

Lorem ipsum dolor sit amet r <span id= "span2" >block</span> 

16 

adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 

17 

</p> 

1 O 

19 

<p> 

20 

Lorem ipsum dolor sit amet, <span id = " span3'' >irtli ne-block</span> 

21 

adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 

22 

</p> 

23 


24 

<p> 

25 

Lorem ipsum dolor sit amet, <span id= "span4" >list-item</span> 

26 

adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 

27 

</p> 

2S 


29 

<p> 

30 

Lorem ipsum dolor sit amet, <span id = ' r spans" >none</ span> 

31 

adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 

32 

</p> 

33 


34 

<P> 

35 

Lorem ipsum dolor sit amet, <span id = span6 J| >hidden</span> 

36 

adipiscing elit. Aliquam accumsan vehicula diam sit amet bibendum. 

37 

</p> 

3S 

</body> 

39 

</html> 


Cddigo HTML 3.19: display msibiiidade.html 


ArtJUiVO: https:/Vgithub.eom/K'9/Kl9-Exercicios7archive7k02-css-fixacaQ33.zip 


© No projeto css, crle um arquivo CSS chamado dispIay-visibiUdade.css. 


1 p { 

2 border: 2px solid black; 
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3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 


width: 600px; 

} 


span i 

padding: I5px; 

margin: 40px; 

width: 200px; 

height: 100 px; 

border: 2px solid black; 

background-color: yellow; 

1 


#spanl i 

display: inline; 

#span2 i 

display: block; 

} 

#span3 i 

display: inline-block; 

1 


#span4 i 

display: list-item; 

#span5 i 

display: none; 

1 


#span6 { 

visibility: hidden; 


Codigo CSS 3.32: display- visibilidade. css 


Arquivo: https: //github.com/KlS/Kl 9-£xercicios/.archive/k02-css-fixacao34. zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/display-visibilidade.html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


http: //localhost/^<U5UARIO>/css/public_html/display-visibilidade . hitml. 


Opacidade 


Podemos definir a opacidade dos elementos HTML com a propriedade opacity. 


Valor 

Descri^ao 

X 

O valor x e uni niimera entre Ottotalmente transparente) e l(sem transparency, 
padrao). 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 
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opacity: 1 


opacity: 0,75 


opacity: 0,5 


opacity: 0.25 



Exercicios de Fixa^ao 


© No projeto css , crie um arquivo chain ado opacidade.html. 


1 <!DOCTVPE html > 

2 <htm 1 lang = ' r pt -br" > 

3 <head> 

4 <meta http-equiv = ' r Content-Type" content=” text/html ; charset=UTF-B" > 

5 <title>K19 - Opacidade</title> 

6 <1 ink rel = " stylesheet' 1 type=" text /css " href = " opaci dade , css "> 

7 </head> 

8 <body> 

9 <div id = llp divl "></div> 

10 <div id = ”div2 ,r ></div> 

11 <div id= rt div3 ,r x/div> 

12 <div id=" div4 '■ ></div> 

13 <div id=" div5" ></div> 

14 </body> 

15 </htmI> 


Codigo HTML 3.20: opacidade.html 


Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-css-fixacao36.zip 


© No projeto css, crie um arquivo CSS chamado opacidade.css. 
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Cddigo CSS 3.33: opacidade.css 


Al'CjUivo: https://github. com/KlS/K19-Exercicio5/archive/k02-css-fixacao37. zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/pyblic_html/opacidade.html. 


No Xlbuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USUARIO>/css/publicJitml/opacid3de.htmL 


*W Posicionamento 


A linguagem CSS define quatro formas para posicionar os boxes dos eleinentos HTML: static, 
relative, fixed e absolute. Mostraremos o funcionamento de cada unia dessas formas. A propriedade 
position defermina a forma de posicionamento desejada. 


static 


O valor static e o valor padrao da propriedade position. O box de um elemento com position: 
static e colocado na sua posi^ao natural. Nao podemos alterar a posigao dos boxes dos elementos 

HTML com position: static. 


Laiem lpruLLVL da lor sit aniet, carsecteiui adipucing elit AliquMa 
flecunu-ftn vtliicuia dtam sit bibendum. Aliquam sad, ttarpor teliu;. 

Emu plaeerat suscitiit bipis in s aUic itiidin 



EXii; lure est, coics^iiit vtl pulviiiarm, €g€ 3 laa sitanuet odio. Piaajard: 
at ieo feugjal, frnHPifam diamut, commode lacus liiteidimi et malsrua 
faunas ac ants ipevun pmim mfaucibiu 


position: static 


relative 


O box de um elemento com position: relative e colocado em urna posi^ao relativa a sua posi^ao 
natural. As propriedades left, top, right e bottom sao utiiizadas para determinar o desloeamento 
entre a posigao desejada e a posigao natural. O espago que seria ocupado por esse box se ele estivesse 
em sua posi^ao natural nao e ocupado por nenhum outro elemento. 
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Loiem ipsum dolor sit amet, caiEecteisii adipu ctng elit Aliquam 
accumsan velumia diam s it amet ti ibendum. Aliquam s ad. temper tellus. 
Dais plAcerat suscipit kiipis m scUicifcidm 



Diis i| ■ ( | v>i ^‘ 4 t -I piilvuBi 454-. :a: .::: must odic-. P:ae: er.t 
at ko dramut, conimcdo lams. Indjeidum it malesua 

fames ac ante ipsum pmuis mfaucibus 


position: relative 


fixed 


O box de um elemento coni position: fixed e colocado em uma posigao relativa a pagina e nao 
acompanha a rolagem do conteudo. As propriedades left, top, right e bottom sao utilizadas para 
determinar o deslocamento entre a posigao desejada e a pagina. 


Lorain ipsum dolor sit 
accumsan rehicula 
tellus Dais placerat s\ 
Dms ramc est, cortse< 
Preesen* at ko feugi 
Inteidum it maiesua fa 



iscmg elit. Aliquam 
l. Abquam sed temper 
.din 

egestas sit an«t odio. 
ltl ut, camniodo lams, 
piimis infancibus 


1 


Fusee vebocula (uipis Tifae mams oniara, sed reshSiulum aim 
dapibus £tiam posuere Indus aicu ut mnlastie- Aenean xuteum 
iiat esc dofar mq^rdiet vulntpat. Fusee id tup is sus cipit, tns tique 
dui ac, giaTida augue. Nam ac placerat jus to Akquamut cougue 
ligula Fusee id varns magna. In quit fimgilla ante, id 
peHentesque lisus. Maecenas elementsim at puiu; a facilisis. 
Lcram ipsum dolor sit amet, conssctelm adipiscing elit. 


Fusee rekucmla turpas 
dapibus. Etiam pc sue re 
erat nee dolor impeidiet 
dui ac, gravida angue. 
liguta. Fus ce id 
pellmtesque risus Mi 



sed vestibulam ami 
istie. Aenean rufntm 
turpis suscipit, tristique 
.jto. Aliquam ut congue 
frmgilla aide, id 
li a! purns a facduis 


Lorem ipsum dokii sit amet, eomeeteSu adipiscing elit. 

Ahquam sed tempoi tellus. Diis placerat suscipit tuipds in 
saUicitudm. Nunc lams magma, ancter vitae rene-nahs eu, dictum 
ac augne. Nunc eleifemd digmssim felis at maths. Dais nine est; 
consequat rel pulvinar m, egeslas sit amet odio. Praesent at leo 
feugiat, fexmnhum diam ut, commode lams. Inteidum et 
maiesuada fames ac ante ipsum ptimis in fauc&us. 


position: fixed 


absolute 

O box de um elemento com position: absolute e colocado em uma posigao relativa a posigao do 
box do elemento HTML ancestral rnais proximo com position diferente de static. Se nao existir um 
ancestral nessas condigoes a posigao sera relativa a pagina. As propriedades left , top, right e bottom 
sao utilizadas para determinar o deslocamento entre a posigao desejada e o ponto de referenda. 


La ism ipsum da lor sit amet 

, consectelui adipueing elit, Aliquam 

accumsan velucula diam sit ame-t b iberdum. Alic 

[Uaimed tempci telluj 

r--i 

K 

1 


i t 

1 —. 

Dais ibuc est comequat 



nit odio. Piaeient 

at ko feugiat, feimfintuiv. 

fames ac ante ipsum pmms m faucibus 

---jeidimi et malesua 


position: absolute 

Figura 3.7: Elemento com position diferente de sta tic utilizado como referenda 
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Lorem ipsum dolor sit n 
acDumsan. vehicula diAit 
teUrn Buis pLacerat susc 
Duis nmc est, coitsequi 
Frees ent *t ko feiigjat 
Ivies dum et malesua fan 



adipiscmg elit. Aliquam 
mi. Aliquam sed temper 
u:\timim 

i, ejecta; sit amet odio. 
m ut, commode liens, 
prunes m faucibus 


1 


Fusee vehucula Strips uiSae matins cciiare, sed VBstJnihim amu 
dapibus Etiam. pocutre brctis ami ut mole she Aenean mfcmrn 
erat nec dokuimperdiet vulutpat. Fusee id turpE susapit, txLstique 
dni ac, gravida aigue. Nam ac place rat jus to. Aliquant, ut cortgue 
ligyla. Rises id varais magiii. In quis fiingilla ante, id 
pellentesque msus. Maecenas elemcriMia at punis a facilisis. 
Lorem ip sunt dolor sit ante t, cansectfitur adrpiscirg elit. 


nut e -■ i. co;: s;_n| I, & ege-,ta-, ::: ainet ctlio 

Praeitii a: lec ,f.\ commode kcu-, 

Inteidum et malesua m fancius. 

Fusee veliicula turpis vitae mauds omaie, ;ed vestibuinu areu 
dapibus. Eham posuen Jtoctas aicu ut rnoks be. Acre an mtaim 
erat hec dolor rmpeidie t vobitpat. Fusee id turpis suscipit, tristique 
dut ac, gravida angue. Nam ac placeiat justo. Aliquam ut congue 
hgi.ila. Fusee id vaiius magna In quis frmgjlla ante, id 
pellentes qiie rinis. Maecenas eleiruendmn at purus a facdisE. 
Lcuem ipsum doku sit amet, consectetai adipEcmg elit 
Akqnam sed temper tellus. Duis placeiat suscipit turpis in 
joHlc ltidin. Nunc lacus magus., auctor vitae venenatis eu, dictum 
ac augue Nunc eleifend digms sira. felis atmattis 


position: absolute 

Figura3.8: Ptigina utiliznda coma referenda 


float 


Podemos fazer o box de um elemento HTML flutuar ao redor dos demais elementos atraves da 
propriedade float 


Valor 

Descri^ao 

left 

Flutuar a esquerda. 

right 

Flitar a direita. 

none 

Sem flutua^ao (padrao). 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 


□ Lorem ipsum dolor sit amet, 
consectetur adipiscmg elit. 
Aliquam a c cum sail vehicula 
■diam sit amet bibendum, 
Aliquam sed temper tellus. Duis placerat 
suscipit turpis in sollicitudin. 


Lorem ipsum dolor sit amet, 
consectetur adipiscmg elit. 

Aliquam accumsan vehicula 
diam sit amet bibendum. 

Aliquam sed tempor tellus. Duis placerat 
suscipit turpis m sollicitudin. 



float: Left float: right 



Important^ 

Os elementos HTML com float diferente de none podem ser repo si cion ados se a janela 
for redimensionada. 



Importante 

Os elementos HTML com float diferente de none nao afetani a altura ou a largura do 
elemento HTML onde eles estao contidos. 


clear 

Os box dos elementos HTML proximos do box de um elemento HTML om float diferente de none 
sao "empurrados” horizontalmente a esquerda ou a direita. Podemos determinar que, ao inves de se¬ 
rein ‘empurrados” horizontalmente, eles sejam exibidos em uma nova llnha atraves da propriedade 

clear. 
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Valor 

Descri^ao 

left 

Nao permite boxes flutuando a esquerda dele. 

right 

Nao permite boxes flutuando a direita dele. 

both 

Nao permite boxes flutuando nem a esquerda nem a direita dele. 

none 

Permite boxes flutuando a esquerda e a direita {padrao) dele. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pal. 



Lorem ip sum dolor sit amet, 
consectetur adipiscing elit 


clear: none 



Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 


Aliquam sed temper tellus. Duis placer at 
suscipit turpis in sollicitudm. Nunc lacus 
magna, auctor vitae venenatis eu, dictum 
ac augue 


clear l left 


Aliquam sed temper tellus Duis placer at 
suscipit turpis in sollicitudm. Nunc lacus 


clear: none 


clear: left 


Lorem ip sum dolor sit amet, 
consectetur adipiscing elit. 


clear: none 



Aliquam sed temper tellus. Duis placer at 
suscipit turpis in sollicitudm Nunc lacus 
magna, auctor vitae venenatis eu, dictum 
ac augue. 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 



clear: right 


Aliquam sed temper tellus Duis placer at 
suscipit turpis in sollicitudm Nunc lacus 


clear: none 


clear: rigfh 



Lorem ipsum 
dolor sit amet. 


clear: none 




Lorem ipsum 
dolor sit amet 



Aliquam sed tempor tellus, Duis placer at 
suscipit turpis m sollicitudm Nunc lacus 
magna, auctor vitae venenatis eu, dictum 
ac augue. 


clear: both 


Aliquam sed tempor tellus. Duis placer at 
suscipit turpis m sollicitudm Nunc lacus 


clear: none 


clear: both 


z-index 

A sobreposiqao dos boxes dos elementos HTML pode ser controlada atraves da propriedade z- 
index. Basicamente, essa propriedade permite determinar em qual piano um box deve ser exibido. 


Valor 

Descri^ao 

auto 

Mesmo piano do box do elemento HTML pai (padrao). 

X 

O valor x e o piano desejado. Esse valor pode ser negativo. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 
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Lorem ip sum dolor sit a met, cons 
sit amet bibendum. Aliquant sed fc 
Nunc lacus magna, auctor vitae \ 
felis at mattis. Duis nunc est, conseqnar 
feugiat, fexmentum diam nt, commodo 


index: 



ig eiit. Aliquam accumsan vehicula diam 
acerat susdpit turpi s in soilicitudin, 
ac augue. Nunc eieifend dignissim 
egestas sit amet odio, Praesent at leo 


Alinhamento vertical 

Utilizando as propriedades de margem e posicionamento podemos alinhar uni elemento de 
forma centralizada na vertical 


Quatquervator 
diferente de static 

icontAinei [ 

height: 6D0px; 
position: relative; 

} 




ttconteuio { 

height: 20Opx; 
position: absolute; 
top: 50%; 

margin-top: -lOOpx; 

} 


#conteudo 


#container 


top: 50% 

margin-top: 


U: 


-iOOpx 



Exercicios de Fixa^ao 


© No projeto css, crie um arquivo chamado posicionamento.html 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 


<!DQCTYPE html> 
chtml lang = ' r pt-br "> 

<head> 

<meta http-equiv- JI Content-Type" content^ 1 ' test/html ; charset=UTF-S J| > 
<title>K1S - Rosieionamento</title> 

<link rel = " stylesheet" type=" text /css pr href-" posicionamento . css "> 
</head> 

<body> 

<img src = " http : //www . kl9 . com.br/app/webroot/figs/main-header-logo . png"> 
<p id = IJ p1 "> 

Lorem ipsum dolor sit amet f consectetur adipiscing elit, Aliquam 
accumsan vehicula diam sit amet bibendum. 

</p> 

<p i d — p2 " > 

Lorem ipsum dolor sit amet f consectetur adipiscing elit. Aliquam 
accumsan vehicula diam sit amet bibendum. 

</p> 


<p id="p3"> 

Lorem ipsum dolor sit amet t consectetur adipiscing elit, 
accumsan vehicula diam sit amet bibendum. 

</p> 


Aliquam 


<p id="p4"> 

Lorem ipsum dolor sit amet t consectetur adipiscing elit, 
accumsan vehicula diam sit amet bibendum. 

</p> 

<p id="p5"> 

Lorem ipsum dolor sit amet t consectetur adipiscing elit, 
accumsan vehicula diam sit amet bibendum. 

</p> 


Aliquam 


Aliquam 
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32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 

44 

45 

46 

47 
43 

49 

50 

51 

52 

53 

54 

55 

56 


<p id="p6"> 

Lorem ipsum dolor 
accumsan vehicula 
</p> 

<p id= H p7"> 

Lorem ipsum dolor 
accumsan vehicula 
</p> 

<p id-"p8"> 


Lorem ipsum dolor 
accumsan vehicula 
</p> 


sit amet 
diam sit 


sit amet 
diam sit 


sit amet 
diam sit 


consectetur adipiscing elit, 
amet bibendum. 


consectetur adipiscing elit, 
amet bibendum. 


consectetur adipiscing elit. 
amet bibendum. 


Aliquam 


Aliquam 


Aliqyam 


<div id=”div1"> 

Posicionamento fixo 
</div> 


<div id — div2'' > 

Posicionamento relative 
<div id-"div3 ,r > 

Posicionamento absoluto 
</div> 

</div> 

</body> 

</htmI> 


Codigo HTML 3.21: posicionamento.html 


ArCJUiVO: https: //github, com/K19/K19-Exercicios/archive7kQ2-css-f ixacao39.zip 


No projeto css, crie uni arquivo CSS chamado posicionamento. css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 


intg { 

float: left; 

} 

#p3 { 

clear: left; 

} 

div { 

width: 200px; 
height: 100px; 
color: white; 

1 

ftdivl { 

position: fixed; 
right: 20px; 
top: 40px; 

background-color: green; 

1 

#div2 { 

position: relative; 
top: 30px; 
left: 60px; 

background-color: blue; 

#div3 { 

position: absolute; 
bottom: -40px; 
right: -1 0 0 px ; 
background-color: red; 
t - index: -1; 

} 
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Codigo CSS3.34: posicionameuto.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao39.zip 


Q No Windows, utilize o Chrome para acessar o enderego: 


http: //localh 0 'st/css/public_htnil/posicionaraento. html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


http://localhost/~<USUARI0>/css/pub1ic_h tml/po sicionament o.h tml . 


Overflow e clip 


Eventualmente, o conteudo de tun elemento HTML extrapola os limites do mesmo. A linguagem 
CSS define algumas propriedades para determinar como essa situagao deve ser tratada, 

overflow-x 


A propriedade overflow-x determina o que os navegadores devem fazer quando o conteudo de 
urn elemento HTML extrapola horizontaimente os limites do mesmo. 


Valor 

Descrigao 

visible 

O contetido excedente na horizontal sera exibido (padrao). 

hidden 

O contetido excedente na horizontal nao sera exibido. 

scroll 

O conteudo excedente na horizontal nao sera exibido e um mecanismo rolagem 


horizontal sera disponibilizado. 

auto 

O conteudo excedente na horizontal nao sera exibido e um mecanismo rolagem 


horizontal sera disponibilizado somente se necessario. 



overflow-x: visible 


Loreinipsum dolor sit ai 


overflow-x: hidden 


Lorem 

ip sum dolor sit ai 


1 1 

D 


overflow-x: scroll 


Lorem 

ipsinn dolor sit ai 


1 1 

D 


overflow-x: auto 


Lorem ip sum. 


overflow-x: auto 
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overflow-y 

A propriedade overflow-y determina o que os navegadores devem fazer quando o conteudo de 
urn elemento HTML extrapola verticalmente os limites do mesmo. 


Valor 

Descri^ao 

visible 

O conte lido excedente na vertical sera exibido (padrao). 

hidden 

O conte lido excedeme na vertical nao sera exibido. 

scroll 

O conteddo excedeme na vertical nao sera exibido eum mecanismo roiagem ver¬ 
tical sera disponibilizado. 

auto 

O conteudo excedente na vertical nao sera exibido e urn mecanismo rolagem ver¬ 
tical sera disponibilizado somente se necessario. 


Lorem ipsmn dolor sit 


Lorem ip sum dolor sit 


Lorem ipsum dolor 

B 

amet, eonseetetur 


amet, eonseetetur 


sit amet, eonseetetur 

—\ 

adipiscing elit. 


adipiscing elit. 


adipiscing elit. 

y 

Aliquant aecumsnn- 





um 


velii cula diam sit. 


overflow-y; visible 


overflow-y; hidden 


overflokry; scroll 


Lor cm ip sum dolor 
sit amet, eonseetetur 
adipiscing elit, 


Lor cm ip sum dolor sit 
amet, eonseetetur 
adipiscing elit. 


overflow-y; auto 


overflow-y: auto 


overflow 


A propriedade overflow determina o que os navegadores devem fazer quando o conteudo de urn 
elemento HTML extrapola os limites do mesmo. 


Valor 

Descri^ao 

visible 

O conte lido excedeme sera exibido (padrao). 

hidden 

O con ted do excedente nao sera exibido. 

scroll 

O conteudo excedente nao sera exibido e um mecanismo rolagem sera disponibi¬ 
lizado. 

auto 

O conteudo excedente nao sera exibido e um mecanismo rolagem sera disponibi¬ 
lizado somente se necessario, 

no-display 

O elemento HTML nao sera exibido se o seu conteQdo extrapolar os limites do seu 
box. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 
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Lorem ip sum doloi sit aniet, 
consectetur adipiscing el it. 
Ali qu am a c cimis an velm ;tii a 
dinm sit Buis plno e rnt — 
suscipit turpi s in sollicitudin. 


Lorem ip sum dolor sit ai 
consectetiu adipiscing el 
Aliquam ac cum sail vchii 

fli ntn fit_Ttnir idrmaint_ 


Lorem ip sum dolor s| 
consectetiu’ adipiscir 
Aliquam accinnsan vj 

rit Plinr n\ 



overflow; visible 


overflow; hidden 


overflow; scroll 


Lorem ip sum dolor f 
consectetiu’ adipiscii 
Aliquam accumsan 


Lorem ipsmn dolor sit 
amet, consectetiu. 


overflow; auto 


overflow: auto 


clip 

Podemos determinar a regiao do box de uni elemeiito HTML que deve ser exibida com a propri- 
edade clip. Essa propriedade so tem efeito sobre elementos com position: absolute. 


Valor 

Descri^ao 

auto 

recti f right, bottom, left ) 

O box inteiro sera exibido (padrao). 

Retangulo que define a regiao que sera exibida. 

inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 



clip: auto 


clip: rect{20px, 95px, 85px r 50px) 



Exercicios de Fixa^ao 


@ No projeto css, crie um arquivo chamado overflow-dip, html. 


1 <!DOCTYPE html > 

2 chtml lang = ,r pt-br ' r > 

3 <head> 

4 <meta http-equiv = JI Content-Type" content^ 1 2 3 4 5 6 7 ' text/html ; charset=UTF-B J| > 

5 <title>K19 - Overflow e clip</title> 

6 <1 i nk re 1 = r ' stylesheet 11 type= text/css J| href= " overflow -clip . css "> 

7 </head> 
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3 

<body> 





9 

<div id-"div1'"> 





10 

<p>l_orem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

11 

<p>Lorem ipsum 

dolor 

si t 

amet 

, consectetur.</p> 

12 

<p>Lorem ipsuin 

dolor 

sit 

amet 

, consectetur.</p> 

13 

14 

15 

16 

<p>l_orem ipsum 
</div> 

dolor 

sit 

amet 

, consectetur.</p> 

<div id="div2 M > 





17 

<p>Lorem ipsum 

dolor 

sit 

amet 

, consectetur.p> 

18 

<p>Lorem ipsuin 

dolor 

sit 

amet 

, consectetur.</p> 

19 

<p>Lorem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

20 

<p>l_orem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

21 

</div> 





22 






23 

<div id = r 'div3"> 





24 

<p>l_orem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

25 

<p>Lorem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

26 

<p>Lorem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

27 

<p>Lorem ipsum 

dolor 

sit 

amet 

, consectetur.c/p> 

28 

</div> 





29 






30 

<div id= " div4 Jl > 





31 

<p>l_orem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

32 

<p>l_orem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

33 

<p>Lorem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

34 

<p>Lorem ipsum 

dolor 

sit 

amet 

, consectetur.</p> 

35 

</div> 





36 






37 

<div id = ”div5 JI > 





33 

01a. 





39 

< / d i v> 





40 






41 

<img id="img1" src=" http:// www. 

kl 9 . com . br/figs/main 

42 

<img id= ff img2" src^ 1 http : //www . 

kl 9 . com . br/figs/main 

43 

</body> 





44 

</html> 






Codigo HTML 3.22 : Qierftow-clipJitml 


Arcjuivo: https://github.com/Kf9/K19-Exercicios/archive/k02-css-fixacao42.zip 


© No projeto css, crie um arquivo CSS chamado over flow-clip.css. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 
23 


div { 

margins 70px; 
width: 200px; 
height: 100px; 
border: 1px solid red; 

} 

P { 

width: 270px; 

} 

ttdivl { 

overflow: visible; 

} 

#div2 { 

overflow: hidden; 

} 

#div3 f 

overflow: scroll; 

} 
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24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 

41 

42 

43 

44 


#div4 { 

overflow: auto; 

1 

#div5 { 

overflow: auto; 

1 

#imgl { 

position: absolute; 
top: lOpx; 
left: 400 px; 
clip: auto; 

} 

#img2 { 

position: absolute; 
top: 250px; 
left: 4 00 px; 

clip:rect(1Opx f IISpx, 103px f 40px); 

1 


Codigo CSS 3.35: overflow-dip. css 


ArqiliVO: https: //github. ccnn/K19/K19-Exercicios/archive/k02-css-f ixacao43.zip 


O No Windows, utilize o Chrome para acessar o enderet^o: 


http://localhost/css/publicjrt ml/overflow-clip,html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/'<USUARIO>/css/public_html/overtlow-clip.html. 


Transforma^oes 


No CSS3 fora in introduzidas algumas fun^oes para realizar as transformagdes de trail slado, es- 
calonamento, distorgao e rotagao nos elementos de umapagina HTML. Essas fungoes sao utilizadas 
em conjunto com a propriedade transform do CSS3. 


translate!) 


O resultado da aplicagao da fungao translate(m r n) e semelhante ao resultado obtido ao mover 
iim elemento atraves do atributo position com o valor relative. Ao utilizar a funcao translate[m, n) 
um elemento e transladado a in unidades de medida da esquerda e n unidades de rnedida do topo. 
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Figum 3.9: Fun^do translateQ 


scaled 


A fungao scale(m, n) escalonara as dimensdes de urn elemento. O escalonamento sera aplicado 
sobre a largura a uma taxa definida por m e sobre a altura a uma taxa definida por n. Caso a fun¬ 
gao seja ehamada com apenas um parametro, a mesma taxa sera aplicada na altura e largura do 
elemento. 



Figum 3.10: Fungao scaleQ 


rotate Q 


A fungao rotate(m) rotacionara urn elemento em torno do sen ponto de origem. O valor de m 
deve ser dado em graus, voltas ou grado. 
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c -■- 

Original 

.... Rotacionado 

l _ ___ 


Figurn 3.11: Fungdo rotate(} 


skewQ 

A fungao skewfm, n) distorcera uni elemento em relagao aos eixos x e y. men definem as distor- 
goes aplicadas nos eixos x e y respectivamente. Os valores demen devem ser dados em graus, voltas 
ou grado. 





Exercicios de Fixa?ao 


@ No projeto css, crie um arquivo chamado transformacoes.html. 


1 <!DOCTYPE html > 

2 <htm 1 lang = ' r pt-br' 1 2 3 4 5 6 7 > 

3 <head> 

4 <meta http-equi v = ' r Content-Type rJ content^" text/html ; char set = UTF-B JI > 

5 <title>K19 - Transformagoes</title> 

6 clink rel=" stylesheet Jr type=" text/css" href = ” transformacoes . css 

7 </head> 

3 <body> 
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9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 


<div id — "div 1 > 
translate () 

< / d1v> 

<div id=”div2"> 
scale () 

</div> 

<div id="div3"> 
rotate() 
</div> 

<div id = |J div4 JI > 
skew() 

</div> 

</body> 

</htinl > 


Codigo HTML 3.23: tmnsforrnacoesJumt 


Arquiuo: https://github.com/K19/Kl9-Exercicios/archive/k02-css-fixacao45.zip 


@ No projeto css, crie um arquivo CSS chamado transformacoes.css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 


div { 

margin: 70px; 

border: 1px solid black; 

background-color : yellow; 

width: lOQpx; 

height: 100 px; 


#div1 { 

transform: translate (50px , -20px); 

/* Webkit: Chrome, Safari */ 

-webkit-transform: translate (50px, -20px); 


#div2 { 

transform: scale(0.5, 2); 

./* Webkit: Chrome, Safari */ 
-webkit-transform: scale(0.5, 2); 


#div3 ( 

transform: rotate(15deg); 

/* Webkit: Chrome, Safari */ 
-webkit-transform: rotate(15deg); 


#div4 { 

transform: skew(10deg, -45deg); 

/* Webkit: Chrome, Safari */ 
-webkit-transform: skew(10deg, -45deg); 


/* 

Moz 

: Firefox 

*/ 

/* 

substituir " 

webkit" por "moz 

/* 

0: 

Opera */ 


/* 

substituir 

webkit" por ,r o" 

/* 

Ms : 

Internet 

Explorer */ 
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44 I/* substituir "webkit" por "ms 11 */ 


Codigo CSS 3.36: tmtisformacoes.css 


Arquivo: https: //github, com/K19/K19-Exercicios/archive/k02-css-f ixacao46.zip 


© 


No Windows, utilize o Chrome para acessar o enderego: 


http://localh&st/css/publicjrtml/transformacoes.html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


http://loca1host/~<USUARI0>/css/public_htm!/transformacoes,html. 


Transudes 


Como vimos anteriormente, as regras CSS podem ser aplicadas aos elementos HTML de acordo 
com o estado atual do tnesmo. Por exemplo, considere as duas regras CSS a seguir. 

1 

2 

3 

4 

5 

6 
7 
3 
9 


div { 

width: 50 px; 
height : 50px ; 

1 

div:hover { 
width: lOOpx; 
height: 100px; 

1 


De acordo com as duas regras CSS acima, quando o ponteiro do mouse for colocado por cima de 
tun div, a largura e a altura desse elemento HTML aumentara instantaneamente de 50px para lOOpx. 



height: 

2 Dpx ; 




height: 

80px; 
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Estado inicial Estado final 


Quando a mudanqa visual de um elemento HTML e muito slgnificativa, o resultado pode nao ser 
agradavel aos usuario. Alinguagem CSS possui propriedades para rnelhorar essas transigoes. 


transition-duration 

A duragao das transigoes pode ser control ad a com a propriedade transit ion-duration 
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Valor 

Descri^ao 

tempo 

A duragao em segundos(s) ou milissegundos(ms). Os e o valor padrao. 


Os navegadores devem gerar, auto mat icamente, frames intermediarios entre visual initial e o 
final. Esses frames devem ser exibidos sequencialmente durante o tempo determinado com a pro- 
priedade transition-duration. 



transition-delay 

Podemos estabelecer tun atraso para o inicio de uma transi^ao com a propriedade transition- 
delay. 


Valor 

Descrigao 

tempo 

A duragao em segundos(s) ou milissegundos(msJ. Os e o valor padrao. 


width: 

20px; 

height: 

: 20px; 


width: 80px ; 
height: 8Dpx; 

transition-duration: 1500ms: 
transition-delay: Is; 




h i i 


! I 1 



tempo (s) 


transition-timing-function 

Os frames que foram uma transi^ao podem ser exibidos com padrdes diferentes. Por exemplo* 
uma transigao pode iniciar devagar, no meio acelerar e terminar devagar. O padrao desejado pode 
ser determinado atraves da propriedade transit! on -timing-function. 


Valor 

Descri^ao 

linear 

Mesma velocidade do inicio ate o final da transigao. Equlvale a cubic- 


bezier(0, 0,1,1). 

ease 

O inicio da transigao e lento, o meio e rapido e o final volta a ser lento (pa¬ 


drao). Equivale a cutnc-bezier{0.25 f 0.1,0.25,1). 
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Valor 

Descrl^ao 

ease-in 

O inicio da transicao e lento. O meio e o final sao rapidos. Equivale a cubic- 
bezier(0.42,0, 1, 1) 

ease- out 

O inicio e o meio da transicao sao rapidos e o final e lento. Equivale a cubic- 
bezier(0 P 0 P 0.58 P 1) 

ease-in-out 

Seme 111 ante ao valor ease com inicio e final mais longos. Equivale a cubic- 
bezier{0.42,0,0.58,1). 

cubic-bezier[o ( n p n p n) 

A transicao seguira o padrao definido pela fun^ao ctibica de bezier. 


height: 2 Op x; 


height: 8 Opx; 

transition-duration: 4s; 

transition-timing-function: linear; 



0 


4 


height: 20px; 


height: 80px; 

transition-duration: 4s; 

transition-timing-function: ease; 




height: 20px; 


height: 3Opx; 

transition-duration: 4s; 

transition-timing-function: ease-in; 


^ tempo (s) 
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transition-property 

Podemos escoiher quais propriedades CSS devem ser consideradas nas transigoes atraves da pro- 
priedade transition-property. 


Valor 

Descrigao 

none 

Nenhuma propriedade sera considerada na transigao. 

all 

Todas as propriedades serao consideradas na transigao (padraoj. 

lista - d e- pro p ri eda des 

Lista das propriedades que devem ser consideradas na transigao. 


width: Ipx; 
height: 2Qpx; 
opacity: 0.3; 


width: 20px; 
height: 80px; 
opacity: 1 ; 

transition-duration: 4s; 
transition-timing-function: linear; 
transition-property: height, opacity; 
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Exercicios de Flxa^ao 


© No projeto css, crle um arquivo chamado fransicoes.html 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 


< 3 DOCTYPE html> 

< ht in 1 lar>g = " pt-br' 1 > 

<head> 

<meta http-equiv=" Content-Type B content^ 1 ’ test / html ; charset=UTF-8" > 
<title>K19 - Transigdes</title> 

<link rel = ri stylesheet <r type= p text /css " href = " transicoes . css Jl > 
</head> 

<body> 

<div id= n divT "> 

K19 Treinamentos 
</div> 

</body> 

</html> 


Codigo HTML 3.24 ; transicoes.html 


Arquivo: https: //github.com/K 19/K19-Exercicios/archive/k02-css-fixacao43.zip 


@ No projeto css, crie um arquivo CSS chamado transicoes.css. 


1 

2 

3 

4 

5 

6 

7 

8 
3 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 


ttdivl { 

margin: 300px; 

padding: lOpx; 

width: 2Q0px; 

height: 200px; 

background-color: #Q64e83; 

color: white; 

transition: Is ease-in-out; 

} 

ttdivl:hover { 

transform: scale(4, 4) rotate(360deg); 

/* Webkit: Chrome, Safari */ 

-webkit-transform: scale(4, 4) rotate(360deg}; 

} 

/* Moz : Firefox */ 

/* substituir "webkit" por "moz" 

/* 0: Opera */ 

/* substituir "webkit" por "o'" 

/* Ms: Internet Explorer */ 

/* substituir "webkit" por "ms" */ 


Codigo CSS 3.38: tmnsicoes.css 


Arquivo: https://github J cQm/K19/K19-ExerciciQ5/archive/k02-c5s-fixacao49.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/transicoes.html* 


«KI9 www. f ac ebook. com/k 1 9trei na m entos 


221 









css 


222 


No Ilbuntu, utilize o Chrome para acessar o enderego: 


httpr/yiocalhost/ r '<USUARIO>/css/public_html/transicoes.html. 


Animacoes 


A partir da sua terceira versao, a linguagem CSS adicionou algumas propriedades para criacao de 
animacoes. Essas animates sao criadas atraves do conceito de keyframes. Nessa abordagem, de- 
venios definir os quadros principais e os navegadores completam a animagao inserindo os quadros 
intennerdiarios. 



Keyframe Frames intermediaries Keyframe 


Os quadros principais sao definidos com a propriedade keyframes. A forma mais simples de 
utilizagao dessa propriedade e definir o primeiro e o ultimo quadro da animagao. Veja, no exemplo 
abaixo, a criagao de uma animagao chamada k!9-animacao 


1 

^keyframes kl9-animacao { 

2 

from i 

3 

width: lOpx; 

4 

} 

5 

to i 

6 

width: lOOpx; 

7 

} 

3 

} 


Os quadros principais sao definidos de acordo com o momento no qual eles serao exibidos. Esse 
instante e descrito como uma porcentagem do tempo total da animagao. 
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Q uadra s g erado s a utom adc a m ente i Qu adros gerada s autom atl c am ente 

pelo nave gad or J pelo navegador 





Mais Sobre 

Essencialmente, as duas animates abaixo sao exatamente iguais. 


1 

©keyframes animacaol { 

2 

from £ 

3 

width: lOpx; 

4 

} 

5 

to { 

6 

width: 70p k; 

7 

} 

a 

} 


1 

©keyframes aniinacao2 { 

2 

OS { 

3 

width: 10 p x; 

4 

} 

5 

100% £ 

6 

width: 70px; 

7 

} 

a 

> 


Depois de definir as animagoes com a propriedade keyframes, devemos associa-la aos elemen- 
tos HTML atraves da propriedade animation-name e determinar o tempo de duragao com a propri- 
edade animation-duration. 


1 div { 
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animat ion-name : kl 9-animacao; 
animation-duration: 3s; 
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2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


Skeyframes kl9-animacao { 
from 1 

width: TOpx; 

} 

to i 

width: lOOpx; 

} 


an im atio n - timing - f unctio n 

Podemos determinar o padrao de exibigao dos quadros de uma animagao com a propriedade 

an imatio n- timing- function. 


Valor 

Descrigao 

linear 

Mesma velocidade do inicio ate o final da animagao. Hquivale a cubic- 
bezier{0, 0, 1, 1). 

ease 

O inicio da animagao e lento, o meio e rapido e o final volta a ser lento (pa¬ 
drao}. Hquivale a cubic-bezier{0.25, 0.1,0.25 f 1). 

ease-in 

O inicio da animagao e lento. O meio e o final sao rapidos. Equivale a cubic - 
bezier(0.42,0. 1, 1) 

ease-out 

O inicio e o meio da animagao sao rapidos e o final e lento. Equivale a cubic- 
bezier(0, 0, 0.58, 1) 

ease-in-out 

Semelhante ao valor ease com inicio e final mais longos, Hqnivale a cubic - 
bezier{0.42.0, 0.5B, 1). 

CLibic-bezier(n,n,n,n) 

A animagao seguira o padrao definido pel a fungao cubica de Bezier. 


animation-delay 

Podemos adicionar um atraso para o inicio de uma animagao com a propriedade animation 
delay. 


Valor 

Descrigao 

tempo 

A duragao em segundos(s) ou milissegundos(ms). 0s e o valor padrao. 


animation-iteration-count 

A quantidade de repeticoes de uma animagao pode ser determioada com a propriedade animation- 
iteration-count. 


Valor 

Descrigao 

X 

O valor x e a quantidade de repetigoes da animagao. 1 e o valor padrao, 

infinite 

A animagao se repetira indefinidamente. 


animation-direction 

A diregao adotada na exibigao de uma animagao pode ser determinada atraves da propriedade 

animatio n- directio n. 
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Valor 

Descri^ao 

normal 

Aanima^ao sera exibida na dire^ao normal (padrao). 

reverse 

A anima^ao sera exibida na dire^ao inversa. 

alternate 

A anima^ao sera exibida nas dire^des normal e inversa de forma alternada, 


iniciando com a dire^ao normal 

alternate- reverse 

A anima^ao sera exibida nas dire^oes normal e inversa de forma alternada, 


iniciando com a diregao inversa. 


animation-play-state 

As animates podem ser pausadas ou reiniciadas atraves da propriedade animation-play-state. 


Valor 

Descri^ao 

paused 

A anima^ao parada. 

running 

A anima^ao em execn^ao. 



Exercicios de Fixacao 


© No projeto css, crie um arquivo chamado animacoes.html. 


1 <!DOCTYPE html> 

2 <html lang = ' l pt-br"> 

3 <head> 

4 <meta http -equiv = J| Content-Type u content= " text/html ; charset = UTF-6 " > 

5 <title>K19 - Anima£oes</title> 

6 <link rel = "stylesheet" type= H text/css " href= n animacoes . css'' > 

7 </head> 

3 <body> 

9 <img id-"img1'' src="http : /Vwww . k19 . com . br/figs/bolinha-vermelha . png"> 

10 <img id-" img2 ,r src- 1 " http : //www . kl 3 . com . br/f igs/bolinha-vermelha - sombre . png "> 

11 </body> 

12 </html> 


Cdfftgo HTML 3.25: animacoes. h tml 


Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-css-fixacaoSI . zip 


@ No projeto css, crie um arquivo CSS chamado animacoesxss. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 


# imgl { 

position: absolute; 
top: Opx; 
left: 100 px; 
z-index: 2; 

animation: animacaol Is linear h animacao2 0.5s linear, 
animacao3 500ms linear f animacao4 500ms linear; 
animat ion-delay: 2s, 3s, 3.5s, 4s; 

/* Webkit: Chrome, Safari */ 

-webkit-animation: animacaol Is linear, animacao2 0.5s linear, 
animacao3 500ms linear,, animacao4 500ms linear; 
-webkit-animation^delay: 2s, 3s, 3.5s, 4s; 

} 
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55 
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58 
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75 

76 

77 

78 

79 

80 
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#img 2 { 

position: absolute; 
top: 40Opx; 
left: 110 px; 
z-index: 1; 

transform: scale(2.5, 2.5); 

animation: animacaoS Is linear, animacao6 0,5s linear, 
animacao7 500ms linear, animacaoS 500ms linear; 
animation-delay: 2s, 3s, 3,5s, 4s; 

/* Webkit: Chrome, Safari */ 

-webkit-transform: scale (2,5, 2.5); 

-webkit-animation: animacaoS Is linear, animacao6 0,5s 
animacao7 500ms linear, animacaoS 500ms line 
-webkit-animation-delay: 2s, 3s, 3,5s, 4s; 

7 

©keyframes animacaol f 
to { 

top: 310px; 

} 

} 

©keyframes animacao2 i 
from { 

top: 31Qpx; 

} 

to t 

top: 335px; 

transform: scale(1,25, 0,75); 

7 

} 

©keyframes animacao3 f 
from i 

top: 335px; 

transform: scale(1.25, 0,75); 

) 

to i 

top: 285px; 

transform: scale(0.75, 1.25); 

> 

} 


©keyframes animacao4 { 
from { 

top: 285px; 

transform: scale (0.75, 1.25); 

} 

to i 

top: 310px; 

transform: scale(l, 1); 

1 

1 


©keyframes animacaoS i 
to t 

transform: scale(1.5, 1,5); 

} 

7 


©keyframes animacao6 i 
from i 

transform: scale(1,5, 

} 

to { 

transform: scale(1,75 

1 


1 - 5 ); 

, 1.75); 


linear , 
ar ; 
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109 

110 

111 

112 

113 
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119 
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123 
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126 

127 

123 

129 

130 

131 

132 
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134 

135 

136 

137 

133 

139 

140 

141 

142 

143 

144 

145 

146 

147 

143 

149 

150 

151 

152 

153 

154 

155 

m 


css 


@keyframes animacao? i 
from i 

transform: scale (1.75 , 1.75); 
to { 

transform: scale (1.25, 1.25); 

1 


@keyframes animacaofi -[ 
from i 

transform: scale{1.25, 1.25); 

} 

to i 

transform: scale(1.5 , 1.5); 

1 


/* Webkit: Chrome, Safari */ 

@-webkit-keyframes animacaol f 
to i 

top: 310px; 

1 

} 

^-webkit-keyframes animacaoZ ■[ 
from 1 

top: 310px; 

1 

to i 

top: 335px; 

-webkit-transform: scale(1.25, 0.75); 

} 


@-webkit-keyframes animacao3 ■[ 
from { 

top: 335px; 

-webkit-transform : scale(1.25, 0.75); 

} 

to i 

top: Z85px; 

-webkit- transform: scale (0.75, 1.25); 

} 

} 

@-webkit-keyframes animacao4 f 
from 

top: ZBSpx; 

-webkit-transform: scale(0.75, 1.25); 

1 

to i 

top: 310px; 

-webkit-transform: scale(1 f 1); 

} 

1 

@-webkit-keyframes animacaoS { 
to f 

-webkit-transform: scale(1.5 3 1.5); 

1 

} 

@-webkit-keyframes animacao6 ■[ 
from { 

-webkit-transform: scale(1.5, 1.5); 

1 

to { 

-webkit-transform: scale(1.75, 1.75); 
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156 

157 
153 

159 

160 
161 
162 

163 

164 

165 

166 
167 
163 

169 

170 

171 

172 

173 

174 

175 

176 

177 
173 
179 

130 

131 

132 

133 

134 


} 

} 

e-webkit-keyframes animacao7 -[ 
from i 

-webkit-transform: scale (1,75, 1.75); 

1 

to i 

-webkit-transform: scale (1.25, 1.25); 

1 


@-webkit-keyframes animacaofl f 
from t 

-webkit- transform: scale (1.25, 1,25); 

} 

to i 

-webkit-transform: scale(1.5, 1.5); 

} 


/* Moz: Firefox */ 

/* substituir "webkit" por ,r moz“ 

/* 0: Opera */ 

/* substituir "webkit" por “o'" 

/* Ms: Internet Explorer */ 

/* substituir "webkit' 1 por “ms" */ 


Codigo CSS 3.43: animacoes.css 


Arquivo: https://github,com/Kl9/K19-Exercicio5/archive/k02-css-fixacaa52.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


h 11 p: / /loca 1 host /css /pu bli c_ht ml /animac oes. h tml . 

No Ufountu, utilize o Chrome para acessar o endereco: 


h 11 p://loca 1h ost/U5UAR10>/css/pub 1ic_h t ml/animacoes.html. 


Seletores 


Como vimos, os seletores sao utilizados para determmar quais elementos HTML devem ser afe- 
tados por uma regra CSS. A lmguagem CSS oferece uma grande variedade de seletores. 


Seletores Msicos 


Seletor 

Padrao 

Exemplo 

Descri^ao 

Universal 

* 

* 

Seleciona todos os elementos 

Tipo 

e 

P 

Seleclona todos os elementos p 

Classe 

.class 

.erro 

Seleciona todo elemento da classe erro 

ID 

#id 

#conteudo 

Seleciona o elemento de id conteudo 

Descendente 

el e2 

pa 

Seleciona todo elemento a descendente de um ele¬ 
mento p 

Filho 

el > e2 

p > a 

Seleciona todo elemento a filho de um elemento p 
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Seletor 

Padrao 

Exemplo 

Descri^ao 

Irmao Adjacente 

el + e2 

hi + p 

Seleciona todo elemento p imediatamente precedido 
de um elemento hi 

Irmao 

el " e2 

hi ~ p 

Seleciona todo elemento p precedido de um elemento 

ill 


Seletores de atributos 


Padrao 

Exemplo 

Descri^ao 

[a] 

[min] 

Seleciona todos os elementos que tenham o atributo 
min definido 

|a= V] 

[min='10”l 

Seleciona todos os elementos que tenham o atributo 
min igual a 10 

[a~-V'] 

ititle = "kl9”l 

Seleciona todos os elementos que possuam a palavra 
kl9 no valor do atributo title 

[a"=“v' r ] 

(hreF=' https "J 

Seleciona todos os elementos que tenham o valor do 
atributo href iniciando com https 

'ii 

ns 

|href$= n .css n ] 

Seleciona todos os elementos que tenham o valor do 
atributo href terminando com ,css 

[a*=V'I 

|title*=“kl9”] 

Seleciona todos os elementos que possuam a string 
kl9 no valor do atributo title 

[a|=V] 

[href[= n https") 

Seleciona todos os elementos que tenham o atributo 
href iniciando com https 


Pseudo-classes 


Padrao 

Exemplo 

Deseri^ao 

:root 

:root 

Seleciona o elemento raiz do documento 

:nth-child(n) 

: nth-child (3) 

Seleciona todo terceiro elemento contido em algum 
outro elemento 

: nth-last- child(n) 

:nth-last-child(3) 

Seleciona todo terceiro elemento de tras para frente 
contido em algum outro elemento 

:nth-of-type(n) 

a: nth-of-type (3) 

Seleciona todo elemento a que e o terceiro elemento 
contido em algum outro elemento 

:nth-Iast-of-type(n) 

a:nth-last-of-type(3) 

Seleciona todo elemento a que e o terceiro elemento de 
tras para frente contido em algum outro elemento 

:first-child 

:first-child 

Seleciona todo primeiro elemento contido em algum 
outro elemento 

:Iast-child 

das t-child 

Seleciona todo tiltimo elemento contido em algum ou¬ 
tro elemento 

: firs t-of-type 

a: first-of-type 

Seleciona todo elemento a que e o primeiro elemento 
contido em algum outro elemento 

: last-of-type 

a: last-of-type 

Seleciona todo elemento a que e o tiltimo elemento 
contido em algum outro elemento 

: only-child 

:only-child 

Seleciona todo elemento que e fillio imico 

:only-of-tvpe 

a: only-of-type 

Seleciona todo elemento que e o linico filho do tipo a 
de algum outro elemento 
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Padrao 

Exemplo 

Descri^ao 

:empty 

: empty 

Seleciona lodo elemento que nao tem contetido 

:Iink 

a: link 

Seleciona lodo link nao visit ado 

: visited 

a: visited 

Seleciona lodo link visitado 

: active 

a: active 

Seleciona lodo link ativo 

: hover 

a: hover 

Seleciona lodo link sob o ponteiro do mouse 

:focus 

input: focus 

Seleciona o input que esta no foco 

: target 

:target 

Seleciona a ancora atual 

:lang(lang] 

ilaiig(pt) 

Seleciona todos os elementos com a Iinguagem pt 

:enabled 

input:enabled 

Seleciona lodos os inputs habilitados 

: disabled 

input:disabled 

Seleciona lodos os inputs desabilitados 

:checked 

input:checked 

Seleciona lodos os inputs marc ados 

:not(s) 

:not(.erro) 

Seleciona lodo elemento que nao e da classe erro 


Pseudo - elemento s 


Padrao 

Exemplo 

Descri^ao 

:first-line 

p: first-line 

Seleciona a prime Ira limha de todo paragrafo 

: first-letter 

p: first-letter 

Seleciona a primeira letra de todo paragrafo 

:before 

p: before 

Utilizado para adicionar conte Lido antes dos paragra- 
Fos 

: after 

p: after 

Utilizado para adicionar contetido depots dos paragra- 
fos 


Prioridade de seletores 

Eventualmente, urn elemento HTML e afetado por duas ou mais regras CSS. Aleni disso, uma de¬ 
term inada pro pried ade CSS p ode ser defimda com valores diferentes em duas ou mais dess as regras. 
Nesse caso, essa propriedade tera o valor definido na regra CSS de maior prioridade. Essas priori- 
dades sao calculadas de acordo com os seletores utilizado s nas regras CSS e na ordem em que elas 
fora m definidas. 

Considere o codigo HTML e o codigo CSS a seguir. 


1 <p id- "pi " cLass^ 1 classl "> 

2 Lorem ipsum dolor sit araet, consectetur adipiscing elit. 

3 </p> 



Perceba que fodo elemento p e afetado pelas dims regras CSS acima. Nessas duas regras, a pro¬ 
priedade color foi definida com valores diferentes. Os seletores dessas duas regras possuem a mesma 
importancia. Nesse caso, a ultima regra tern maior prioridade. Portanto, o texto do paragrafo sera 
exibido em azul 
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CSS 


A propriedade font-size nao entrou em conflito, pois foi definida em apenas uma das regras CSS. 
Portanto, o tamanho da fonte do texto do paragrafo sera 14px. 

Agora, suponha que o codigo CSS seja o seguinte: 



Observe que o paragrafo do exemplo e afetado pelas duas regras CSS acima. Nesse caso, qual sera 
a cor do fexto do paragrafo? A resposta correta e vermelho. Isso ocorre, pois os seletores de classe 
possuem importancia maior que os seletores de tipo. 

Conforme a complexidade dos seletores utilizados em nossas regras CSS aumenta, a dificuldade 
em determinar qual deles possui maior importancia tambem aumenta. Por isso, devemos seguir o 
algoritmo definido na especificaqao da linguagem CSS para determinar a importancia dos seletores. 
Nesse algoritmo, os seletores obterao uma pontuacao em quatro criterios diferentes. 


An Caso as propriedades sejam definidas atraves do atributo style, a pontuacao nesse criterio sera 1. 
Caso contrario sera 0. 

B: A pontuacao nesse criterio sera a quantidade de seletores de ID que formam o seletor da regra 
CSS. 

C: A pontuacao nesse criterio sera a soma das quantidades de seletores de classe, de atributos e de 
pseudo-classes que formam o seletor da regra CSS. 


D: A pontuacao nesse criterio sera a soma das quantidades de seletores de tipo e de pseudo-elementos 
que formam o seletor da regra CSS. 


O criterio A possui prioridade sobre o criterio B, que por sua vez possui prioridade sobre o criterio 
C, que por sua vez possui prioridade sobre o criterio D. Veja nas imagens abaixo, uin exemplo de 
como calcular a pontuacao dos seletores. 


CBCBCB CD D DC 

P la3s2 l ft?l] h lassl l | s F a n |fr fi* s t - c h i 1 d | |inp ut ||[ ch e c k e d ]| { 

coloi: led; 

} 


Pontuacao: 


a b c D 


0 3 5 3 


axis www. f ac ebook. com/k 1 9trei na m entos 


231 

























css 


232 


D D CDDCBCBC B 


i 3ection i i aitic i e i ciass2 i Em i*mi hayei i Em ^ giassi i Fm i visit m * 

color: red; 

> 


Pontuagao: 


a b c o 


0 3 4 4 


No criterio A, as duas regras obtiverara a mesma pontuagao. Como ocorreu um empate, devemos 
analisar o criterio seguinte. No criterio B, houve outro empate. Portanto, devemos analisar o proximo 
criterio. No criterio C ? a primeira regra possui uma pontuacao maior. Dessa forma, o seletor da 
primeira regra possui maior importancia fazendo com que essa regra tenha maior prioridade. 

Exerclcios de Fixa^ao 


0 No pro je to css, crie um arquivo chain ado seletores-basicos.htinl. 



1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 


<!DOCTYPE html> 

< ht m 1 lang = ' r pt-br ,r > 

<head> 

<meta http-equiv = J| Content-Type" content^” text/html ; charset=UTF-8 J| > 
<title>K19 - Seletores - l</title> 

<1 ink rel = " stylesheet " type^" 1 text / css " href = n seletores -basicos . css "> 
</head> 

<body> 

<div id=" conteudo J| > 

<p>Lorem ipsum dolor sit amet , consectetur adipiscing elit.</p> 
<ul> 

<li>Item 1 < /1 i > 

<li class=" cancelado ">Item 2</li> 

<li> 

Item 3 
<ul> 

<li>5ubitem 1</11> 

<li>Subitem 2</li> 

</uI> 

</li > 

<li class = " ca rice lad o ">I tern 4 < /1 i > 

</ul> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

<p>Lorem ipsum dolor sit amet , consectetur adipiscing elit.</p> 

</div> 

</body> 

</h tml> 


Codigo HTML 3.27: seletares-basicos.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-fixacao54.zip 


© No projeto css, crie um arquivo CSS chamado seletores-basicos.css. 


i * { 
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CSS 


2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 


margin: Opx; 
padding: Opx; 

body i 

background-color: #ddd; 

1 

#conteudo { 
width: 800px; 
margin: 0 auto; 
background-color : white; 
border: 1 px solid #333; 
padding: TQpx; 

1 

. cancelado -[ 

text-decoration: line - through; 

1 

ul { 

padding: 000 40px; 

1 

ul li { 

color: blue; 

1 

ffconteudo > ul > li { 
margin: 0 0 20px 0; 

1 

ul + P t 

color: red; 

ul ” p l 

font-style: italic; 

} 


Codigo CSS3.46: setetores-basicos.css 


Arqutvo: https://github.com/Kl'iJ/KIS-Exercicios/archive/kOZ-css-fixacao55.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/pu blic_h tm 1/ se1e t ores- ba sic os . html. 


No Ubuiitu, utilize o Chrome para acessar o endereco: 


h 11 p://loca 1 host/~< U5UARIO>/css/pub1 ic_h tml/sele tor es-basicos.h tml . 


0 No projeto css, crie um arquivo chaniado seletores-de-atributos.html 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DGCTfPE html> 

<h trail lang = "pt-br' 1 > 

<head> 

<meta http -equiv- "Content -Type" content = " text / html ; charset = UTF -8" > 

<title>K19 - Seletores - 2</title> 

<Iink rel = rJ stylesheet <r type = n ' text/css " href = p seletores -de - at ributos , css ?l > 
</head> 

<body> 

<a href= "#a - link ">l_ink 1</a> 

<a href= ”#b-link" title = "Link para a pagina 2''>Link 2</a> 
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11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 


<a href -"#1 ink-c '' title=" Pagina 3 JI >Link 3</a> 

<a href = ""Slink-d |J title-" Link para a pagina 4 JI >Link 4</a> 

<a href ="#link-e" titles" Link para a pagina da K19 Tr ein ament os Jl >L ink 5</a> 
<a href = r ’#links-f Hr title = "Link para a pagina 6 |J >Link 6</a> 

<a href = "#link" title= |J Link para a pagina 7">Link 7</a> 

<hr> 

<img src = JI http : //www . kl 9 . conn . br/figs/main - header - logo . png Jr 
title=" Logo da K19"> 

<img src=" http : //www . kl 9 . com . br/f igs/kOI - logo - large . png' 1 > 

<img src = ' r http : //www . kl 9 . com . br / f igs/ k02 - logo - large . png" > 

</body> 

</html> 


Cddigo HTML 3.26: setetores-de-atributos.html 


Arqutvo: https://gifhub.com/K19/K19-Exercicios/archive/kO2-css-fixacao57.zip 


© No projeto css, crie uni arquivo CSS chamado seletores-de-atributos,css. 


1 

[title] { 

2 

border: 4px solid red; 

3 

} 

4 


5 

[title=’Pagina 3’] { 

6 

color: green; 

7 


3 


9 

[title~='Kl9'] i 

10 

padding: lOpx; 

11 

background: yellow; 

12 

1 

13 


14 

[titie rt = f Link ' ] { 

15 

margin-right: 30px ; 

16 


17 


18 

[href$ = 1 link p ] f 

19 

outline: 4px solid blue; 

20 

} 

21 


22 

[src*= f large 1 ] f 

23 

border: 4px solid green; 

24 

1 

25 


26 

[ href [-’#11nk ’ ] { 

27 

font-size: 30px; 

28 

1 


Codigo CSS 3.47: seletores de-atributcs.css 


Arquivo: https : //github.com/K19/K19-Exercicios/archive/k02-css-fixacao58.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/css/public_html/seletore5-de-atributos .html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


http://localhost/~<USUARIO>/css/pub1 i c _h t ml/sele t or e s-de-atribu tos,html. 
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css 


No projeto css, crie um aiquivo chamado seletores-de-pseiido-classes.html. 


< ! DGCTTPE h t ml > 

<html lang = ''pt-br ,r * 

<head> 

<meta http-equiv = J| Content-Type" content^" text/html ; char set = UTF-8 J| > 

<title>K19 - Seletores - 3</title> 

<link rel = " stylesheet " type= 1,1 text/css" href= " seletores -de -pseudo -classes . css rj > 
</head> 

<body> 

<h 1 id = '‘ sele tores -3-ancora "> 

Loren ipsun dolor sit amet, consectetur adipiscing elit, 

</h1 > 


< u 1 id = ,r li 

sta 1 "> 

< 1 i > 11 em 

1 < /1 i > 

<li>Itera 

2 < /1 i > 

<11>Item 
</ul> 

3</li> 

<ul i d = " 1 i 

s t a 2 H > 

<li>Item 

1</li> 

<11>Item 

2 < /1 i > 

<li>Item 

3 < /1 i > 

<li>Item 

4 < /1 i > 

<li>Item 

5 < /1 i > 

</ul> 



dolor 

sit 

amet , 

CO 

nsectetur 

adipiscing 

elit.</p> 

dolor 

sit 

amet , 

CO 

nsectet ur 

adipiscing 

elit,</p> 

dolor 

sit 

amet , 

CO 

nsectetur 

ad ipiscing 

elit.</p> 

dolor 

sit 

amet , 

CO 

nsectetur 

ad ipiscing 

elit.</p> 

dolor 

sit 

amet, 

CO 

nsectetur 

adipiscing 

elit.</p> 


<p>Lorein ipsuir 
<p>Lorein ipsuir 
<p>Lorein ipsuir 
<p>Lorem ipsun 
<p>Lorem ipsuir 

<div> 


</div> 

<d iv> 

<h1>Lorem 
</div> 

<div> 

<h2>Loren 

<h3>Loren 

<h3>Lorem 

</div> 

<div></div> 


<div> 

<a href = 11 #seletores-3-ancora IJ >Link 1</a> 

<a href = 9 ht tp : / / www , kl 9 „ com . br |J >Link 2</a> 
</div> 

<div> 

<input type-" text" > 

<input type = "text JI disabled> 

<input type = "text J| > 

</div> 

< d i v > 


psum 

dolor 

sit 

amet f 

consectetur 

adipiscing 

elit.</h1> 

psum 

dolor 

sit 

amet f 

consectetur 

adipiscing 

elit.</h 2 > 

psum 

dolor 

sit 

amet , 

consectetur 

adipiscing 

elit.</h2> 

psum 

dolor 

sit 

amet r 

consectetur 

adipiscing 

elit,</h1> 

psum 

dolor 

sit 

amet t 

consectetur 

adipiscing 

elit.</h2> 

psum 

dolor 

sit 

amet t 

consectetur 

adipiscing 

elit.</h 3 > 

psum 

dolor 

sit 

amet r 

consectetur 

adipiscing 

elit.</h3> 


< input 

type- " check bo 

<input 

type = " check bo 

< input 
</div> 

type- " check bo 

<ul lang : 

es r '> 
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70 

71 

72 

73 

74 

75 

76 

77 
73 

79 

80 
81 
82 
83 

34 

35 
86 


<li>Item 1</1i> 
<li>Item 2</li> 
<11>1tern 3</1i> 
</ul> 

<ul lang="en N > 

<11>1tern 1</1 i> 
<li>ltem 2</1i> 
<li>Item 3</li> 
</ul> 

<ol lang=' r en”> 

<11>1tern 1</1i> 
<11>1tern 2</1i> 
<li>Item 3</1i> 
</ol> 

</body> 

</h tml> 


Codigo HTML 3,29: seletoTes-de-pseudo-classes. html 


Arquiuo: https://github.com/K19/K19-Exercicios/archive/kri2-c55-fixacaoGO.zip 


9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 

41 

42 


No projeto css, crie um arquivo CSS chamado seletores-de-pseudo-classes,css. 


:root { 

font-size: 30px; 

} 

ttlistal li:first-chiId { 
color: red; 

} 

ttlistal li:last-chiId { 
color: blue; 

1 

#lista2 li:nth-child(2) { 
color: magenta; 

1 

#lista2 li:nth-last-child(2) { 
color: orange; 

1 

p:first-of-type { 
color: yellow; 

1 

p:last-of-type { 
color: aqua; 

1 

p: nth-of-type(2) f 

color: firebrick; 

1 

p:nth-last-of - type (2) { 
color: lawngreen; 

} 


:only-child { 
border: 4px 

1 


solid red; 


h2 :only-of-type { 
color: plum; 
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Codigo CSS 3.48: seleto res -de pseudo - c hs ses. css 


Arquivo: https://eLthub.com/K19/K19-Exercicios/archive/k02-c55-fixacao61 .zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/css/publicJvtml/seletores-de-pseudG-classes.html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


h 11 p ://loca 1 host /~< USU ARI0> /css/ pub 1 i c_h trail /se le t or e s-de- pseudo - c las ses.ht ml . 
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@ No projeto css, crie urn arquivo chamado seletores-de-pseudo-eIemeiitos,html. 


1 <!DOCT YPE html> 

2 <htm 1 lang = '' pt -br" 1 > 

3 <head> 

4 <meta http-equiv = JI Content-Type" content- 1 ' text/html ; charset = UTF-8" > 

5 <title>K13 - Seletores - 4</title> 

6 <link re 1 = " stylesheet ,r type= l# text/css ir href= n seletores -de -pseudo -element os . css "> 

1 </head> 

3 <body> 

3 <hl>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> 

10 

11 <p> 

12 Loren ipsum dolor sit amet t consectetur adipiscing elit. In 

13 mollis, nibh et tempor soilicitudin, orci lorem iaculis sem, 

14 sit amet sodales quam nassa sit amet risus. Fusee malesuada 

15 eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 

16 leo nunc, in ornare turpis aliquam quis. 

17 </p> 

18 </body> 

13 </htmI> 


Cod igo HTML 3.30: seletores-de-pseudo-eiementos.htmi 


Arquivo: https://github, com/Ki9/K19-£xercicL05/archive/kQ2-c5s-fixacao63.zip 


No projeto css, crie um arquivo CSS chamado seletores-de-pseudo-elementos.ess. 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

11 

12 

13 

14 

15 

16 
17 


p:first-line i 

background-color: yellow; 

p: first - let ter { 
font-size: 50px; 

1 

hi:before { 

content: '~ 3 ; 

color: red; 

1 

hi:after t 

content: 1 ~; 

color: red; 

} 


Codigo CSS 3.49: seletores-de-pseudo-elementocss 


Arquivo: https://github.coin/K \ 9/K19-Exercicios/archive/k02-css-fixacao64.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/seletores-de-pseudo-elementos . html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


h 11 p://loca 1h ost/~<U5UARIO>/css/pub1 ic_h tml/sele tor e s - de-pseudo -el ement o s. h tml . 


Media Queries 
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Media Types 

No momenta em que definimos as regras CSS dos nossos documentos, tambem podemos de- 
termlnar para quais tipos de midia essas regras serao validas, ou seja, podemos decidir quais regras 
serao aplicadas quando o documento for apresentado em uma tela, no papel ou narrado por um 
sintetizador de voz, por exemplo, Podemos informar o tipo de midia de duas formas: com o atributo 
media do elemento link ou com a regra media do CSS. 

1 I <1 ink rel = u stylesheet J| type = " text / css J| h ref =" aqu i vo . css" [med 1a = “ sc re e ']> 


1 

2 

3 

4 

5 

6 
7 


s&media screen { 
body i 

background-color: black; 

} 


A linguagem CSS define os seguirites tipos de midia. 


Media Type 

Descri^ao 

all 

Todos os tipos de midia. 

braille 

Dispositives em braille com resposta a toques. 

embossed 

Impressoras em braille. 

handheld 

Dispositivos portateis [exceto smartphones mais modernosj. 

print 

Impressoras convencionais. 

projection 

Projetores. 

screen 

Tela de computadores, smartphones ou algum dispositive do genero. 

speech 

Sintetizadores de voz. 

tty 

Dispositivos de grades com caracteres de tamanho fixo (telexes, terminal 
ou dispositivos com limita^oes de exibiqao). 

tv 

Televisores. 


Podemos definir as mesmas regras CSS para diversos tipos de midia. Para isso devemos separar 
esses tipos por virgula. 

1 <link rel = " stylesheet ,r type- l? text /css " href aquivo . css J| [media = Ir screen , print "] > 


1 

2 

3 

4 

5 

6 
7 


fgmedia screen., print' { 

body t 

background-color: black; 

1 


Media Groups 

Algumas propriedades nao sao aplicaveis a determinados tipos de midia. Por exemplo, a propri- 
edade width nao pode ser aplicada a midia speech. Por outro lado, algumas propriedades podem 
ser aplicadas a diversas midias. Por exemplo, a propriedade position pode ser aplicada as midias 

screen, projection, handheld, print, tty e tv. 
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Para identificarj mais facilmente, quais propriedades podem ser aplicadas a um determinado 
tipo de midia, a especificacao da linguagem CSS divide em grupos os diversos tipos de midia. 


Confira na tabela a seguir a relacao entre os tipos de midia e os grupos de midia: 


Media Type 


Media Group 

5 



continuous e paged 

visual, audio, speech e tactile 

grid e bitmap 

interactive e static 

braille 

continuous 

tactile 

grid 

ambos 

embossed 

paged 

tactile 

grid 

static 

handheld 

ambos 

visual, audio, speech 

ambos 

ambos 

print 

paged 

visual 

bitmap 

static 

projection 

paged 

visual 

bitmap 

interactive 

screen 

continuous 

visual, audio 

bitmap 

ambos 

speech 

continuous 

speech 

nenhum 

ambos 

tty 

continuous 

visual 

grid 

ambos 

tv 

ambos 

visual, audio 

bitmap 

ambos 


Propriedades especificas 

Os tipos de midia do CSS permitem definir diferentes regras para eada tipo de midia, Entretanto, 
eventualmente e necessario definir regras CSS de acordo com caracteristicas mais especificas dos 
dispositivo de saida. Para is so, devemos utilizar as chamadas media queries, Veja o seguinte exem¬ 
plo. 

1 

2 
3 


©media screen and (min-width: SQQpx) i 
1 


No exemplo acima, as regras CSS serao aplicadas caso o tipo de midia utilizado seja screen e a 
areaderenderizagao do documento (viewport) tenha, no mmimo, 500 pixels de largura. Como vimos 
as media queries tambern podem ser definidas atraves do atributo media do elemento link, 

1 

2 

3 

4 

5 


<link 

rel= " stylesheet" 
type=" text / css H 
href ="arquivo . css ,r 

[merii a= " screen and (min-width: 5Q0px) ti y > 


No exemplo abaixo, o cddigo dentro da regra media sera aplicado quando a largura do viewport 
for pelo menos 500 pixels ou quando a orienta^ao for portrait. 


1 

2 
3 


©media (min-width: 500px) , (orientation: portrait) ( 
} 


Eventualmente, uma media query pode nao fazer sentido. Considere o seguinte exemplo. 


©media speech and (min-width: 500px) i 
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No exemplo acima, a media query e contraditoria, pois o tipo de midia speech nao e compativel 
com a propriedade min-width, Dessa forma, o codigo CSS definido dentro da regra media nunca 
sera processado. 


Veja a seguir algumas propriedades que podemos utilizar nas media queries 


Propriedade 

Descri^ao 

Valor 

Media Type 

min e max? 

width 

Determina qual deve ser a largura do 
viewport no dispositivo de saida, 

Medidas 

visual e tactile 

sim 

height 

Determina qual deve ser a altura do 
viewport no dispositivo de saida. 

Medidas 

visual e tactile 

sim 

device-width 

Determina qual deve ser a largura da 
tela do dispositivo de saida. 

Medidas 

visual e tactile 

sim 

device'-height 

Determina qua! deve ser a altura da 
tela do dispositivo de saida. 

Medidas 

visual e tactile 

sim 

orientation 

Verifica se o viewport esta na orien- 
ta^ao portrait [retrato] ou landscape 
(paisa gem). 

portrait ou lands¬ 
cape 

bitmap 

nao 

aspect-ratio 

Determina a razao entre as proprie¬ 
dades width e height. 

inteiro/inteiro 

bitmap 

sim 

color-index 

Determina o niimero de cores do 
dispositivo de saida. 

inteiro 

visual 

sim 

resolution 

Determina a resolu^ao do disposi¬ 
tivo de saida. 

dpi 

bitmap 

sim 



Exercicios de Fixa9ao 


No projeto css, crie um arquivo chamado media-types.html 


1 < 3 DOCIVPE html > 

2 <html lang = ' r pt-br" > 

3 <head> 

4 <meta http-equiv = ' r Content-Type" content^ " test/html ; charset=UTF-8" > 

5 <title>K19 - Media Types</title> 

6 <Iink rel = " stylesheet " type=" text/ess" href = ' ; media-types , css u > 

7 </head> 

8 <body> 

9 <p>Lorem ipsum dolor sit amet, consectetur adipiseing elit.</p> 

10 </body> 

11 </html> 


Codigo HTML3.34: media-types.html 


Arquivo: https://github.com/Kl9/K19-Exercicios/archive/k02-css-fixacao66.zip 


^ No projeto css, crie um arquivo CSS chamado media-types,css. 


1 ©media all { 

2 P { 

3 font-size: 50px; 
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4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 
23 


} 

©media screen { 

P { 

color: red; 

} 

} 

©media print i 
P ( 

color: blue; 

} 

} 

©media handheld, screen and (max-device-width:480px) i 
P t 

color: green; 

1 

} 


Codigo CSS 3.55: media-types.css 


Arquiuo: https: //github , com/K 1 9/K19-Exercicios/archive/k02-css-f ixacao67.zip 

© No Windows, utilize o Chrome para acessar o enderego: 

http: //localhost/css/public_html/n»edia-types.html. 

No Ufountu, utilize o Chrome para acessar o endereco: 

h 11 p://loca1 host i ~< USU AR IO> / c ss7 pub 1 i c_h t ml / med i a -1 y pe s. ht m 1 . 


*# Sprites 


Normalmente, uma pagina web e formada por diversas imagens pequenas ou medias. Se essas 
imagens forem adicionadas com o elemento img, o navegador realizara uma requisigao HTTP para 
cada imagem. Consequentemente, o tempo de carregamento da pagina sera alto devido a quanti- 
dade de requisites e ao overhead dos pacotes HTTP. 


Analogia 

Adicionar individualmente imagens pequenas ou medias ern uma pagina web e como 
ter quer comprar diversos itens pequenos ou medios no supermercado e fazer uma vi- 
agem para trazer cada urn deles. 


Uma tecnica amplamente utilizada para melhorar o tempo de carregamento das paginas web e 
denominada sprite. Essa tecnica consiste em agrupar todas as imagens pequenas e medias em uma 
unica imagem grande e depois “recorta-la” com as propriedades CSS. 
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b 


][ s# 
gg IT 


cursfls-icones-png 



backgr ound-image : url( ' cursos-icones.png' | ; background-image : url( ' cursos-icones .png' } ; 

background-position: Opx Opx; background-position: -lOClpx -lUOpx; 



Exercicios de Fixagao 


Q No projeto css, crie uni arquivo chamado sprites.html. 


1 

<!DOCTYPE html> 

2 

<html lang = ' r pt-br"> 

3 

<head> 

4 

<meta http-equiv = J| Content-Type p content^ 1 2 3 4 5 6 7 ' text/html ; charset = UTF-8 J| > 

5 

<title>K19 - Sprites</title> 

6 

<link rel= |J stylesheet 11 type= ”text/css J| href= H sprites . css "> 

7 

</head> 

3 

<body> 

9 

<ul> 

10 

<1i>K1T - Orientagao a Objetos em Java</li> 

11 

<11 class=" kl2 ">K1 2 - Desenvolvimento Web com J5F2 e JPA2</li> 

12 

<li class- 1 ' k21 r '>K21 - Persistencia com JPA2 e Hibernate</1 i> 

13 

<li. class= ''k22 ,7 >K22 - Desenvol vimento Web Avangado com JSF2 , EJB3.1 e CDI</li> 

14 

<li class^ k23 ">K23 - Integragao de Sistemas com Webservices , JMS e EJB</li> 

15 

<li class= "k20 ">K2G - Formagao Desenvolvedor Java Avangado</li> 

16 

</ul> 

17 

</body> 

13 

</html> 


Codfgo HTML 3.35: sprites.html 


Arquivo: https://Eithub.com/K19/K19-Exercicio5/archive/k02-c5s-fixacao69.zip 


0 No projeto css, crie um arquivo CSS chamado sprites.css. 


1 li:before ( 

2 content; ' rni ; 

3 display: inline -black; 

4 width: 44px; 

5 height: 44px; 

6 vertical-align: middle; 

7 background - image : url{ np http:/ /www .k19.com.br/figs/kl9 -logos-sprite, png 1,1 ) ; 
3 background-repeat: no-repeat; 
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9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 
29 


1 


li . kl2:before { 

background-position: -44px Opx; 

} 

li.k21:before { 

background-position: -S8px Opx; 

} 

li . k.22 : before { 

background-position : Opx -44px; 

} 


li . k23:before { 

background-pos ttion: -44px -44px ; 

} 

li . k20:before { 

background-position : -33px -44px; 

1 


Codigo CSS 3,56: media-tvpes.css 


Arquivo: https://github.com/K19/K19-ExercicLQs/archive/k02-c5s-fixacao7Q.zip 


© No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/css/public_html/sprites.htrnl. 


No Ubimtu, utilize o Chrome para acessar o endereco: 


http://localhost/™<USUARIQ>/css/public_html/sprites.html. 


Gradientes (Conterido Extra) 


Ate a versao 2 do CSS, nao era posslvei definir um gradiente de cores como background de urn 
elemento a nao ser atraves de imagens estaticas (jpg, gif ou png). A parfir da versao 3, podenios defi¬ 
nir um gradiente diretamente no codigo CSS atraves das fun^bes linear-gradient, repeat! ng-linear- 
gr adieu t radial-gradient e repeating-radial-gradient. 

De acordo com a especifica^ao CSS, os gradientes sao sernelhantes as imagens. Eles podern ser 
definidos em qualquer propriedade que aceite uina imagem como valor. 



image. 


Mais Sobre 

Ate o momento do fechamento da versao atual desta apostila, o navegador Firefox 
so suporta as fim^oes de gradiente nas propriedades background ou background- 


Gradlente linear 

Para definir um gradiente linear, e necessario utilizar a ftm^ao linear-gradient. 
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Defintgao da 
linha do gradiente 


Lista de 

paradas de cares 


linear-gradlent( [ <angulo> | to ladu-oii-canto ,]?, i<parada-de-cor> [, <garada-d.e-eor>] +,) 


<angiilo> 

Replies enta □ angulD de inclinacao do giadiente. 

< par a da- de- cor> 

Represents uma cor e a pDsiqaD em que ela deve 
apaiecer sabre a l inha da gradiente 


<lado-ou-canto> 

Repiesenta a regiao do tox do gradiente na qnal a ultima 
<parada-de-coi> sera posicianada. E forma do pelos pairs de 
lades left 3 light e/au top I bottom, nao nnpoitaido a aidem em 
que aparecem. A pnmeira <parada-de-cor> sera pasieiDnada na 
iegiao simetneamente opasta a da ultima <parada-de-coi>. 


No exemplo abaixo, podemos entender melhor cada uni dos parametros: 


linear- gradient {to 


top 



Primeira parada da cor (starting point) 


Linha do gradiente 
parada de cor (ending point) 


left, green, yellow} 


Veja mais alguns exempLos: 


linear-gradient^ to toj? right, green 50%, yellow^ 


linear-gradient(135deg, green, white, blue) 

Repare que quando a primeira parada de cor comeca em uma 
ente e preenchido com a cor da primeira parada de cor do 0% ate essa posigao. 

Gradiente linear com repetl^ao 

Para definir um gradiente linear com repeti^ao, devemos utilizar a fun^ao rep eating-linear-grad lent 
que recebe exatamente os rnesmos parametros da fun^ao linear-gradient, 

A principio o gradiente linear com repetigao funcionara da mesma forma que o gradiente linear. 
Seu comportamento so sera alterado nas seguintes situates: 

* Se a primeira parada de cor nao comegar em 0%. 


u 



posi^ao diferente de 0%, o gradi- 
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* Se a ultima parada de cor nao terminal* em 100%. 

Se uma ou as dnas situagoes ocorrerem, o gradiente se repetira para completar as regioes da linlia 
do gradiente sem cores definidas. 

Veja alguns exemplos: 


linear-gradient(to top left, qreeii, yellow) 



repeating-linear-gradient(to top left, green, yellow| 



linear-gradient(to top left, green 50%, yellow| 



repeating-linear-gradient(to top left, green 50%, yellow) 



linear-gradient(to top left, green, yellow 50%) 


J 


repeating-linear-gradient(to top left, green, yellow 50%) 



Gradiente radial 

Para definir um gradiente radial, devemos utiiizar a fung ao radial-gradient. 


radial-gradient{ 


i Defimgao da forma, dimen sao e posicao do gradient© 

[ 

[circle || <tamanho>] [at <posicao ]?, I 

[ellipse || [<tamajLho> | <porcentagem>] {2)3 [at <posi^ao , | 

[[circle | ellipse] || <alcance> ] [at :posiijao>] ? , | 

at <posi^ao 

i <parada-de-cor>, [, <parada-de-cor>3+) 

! Lists de paradas de cores 
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<tamanho> | <porcentaqem> 

Repiesenta o tamanho do raio da forma do gradiente 
No caso da clips b. o tamanho pode ser dado atiaves 
da poicentagem em lelacao ao tamanho do box do 
gradients, 

<p arada-de-cor> 

Repicsenta uma cor e a posi^ao em que ela deve 
apaitcer sabre a linha do giadiente. 


<pos ao> 

Repitsenta a posicao do box do giadiente na qual a pumeiia 
<paiada-de-coi-> seta posicionada. Fade ser lnfoimada atraves 
dos pares de lados left I light e/ou top I bottom, nao impoitando 
a oidem em que apaiecem. T&mbem pode recebei □ valor 
center, que e o padiaa A posipto tanibem pode ser mfoimada 
atraves de cooidenadas em lelaeao ao canto superior esquerrio 
do box do giadiente 

<alcance> 

Repiesenta a fauna como o giadiente sera distnbmdo dentin do 
box do giadiente 


No exemplo abaixo, podemos entender melhor cada uni dos parametros: 


radial-gradient(50% 50% at center, green, white) 



Gradiente radial com repeti^ao 

Para definir um gradlente radial coni repetigao, devemos utilizar a fungao repeating-radial-gradient 
que recebe exatamente os mesmos parametros da fungao radial-gradient. 

A principle o gradiente radial com repetigao funcionara da mesma forma que o gradiente radial. 
Seu com portamento so sera alter ado nas seguintes situagbes: 

* Se a primeira parada de cor nao comegar em 0%. 

* Se a ultima parada de cor nao terminar em 100%. 

Se uma ou as duas situagoes ocorrerem, o gradiente se repetira para completar as regibes da linha 
do gradiente sem cores definidas. 

Confira o exemplo: 


radial-gradient(black 0% r white 25%) 
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repeating-radial-gradient, {black 0%, white 2 5%) 



Heran^a (Conteudo Extra) 


Heranga em CSS e o mecanismo pelo qual os valores de algumas propriedades sao passadas de 
urn elemento pai para um elemento filho. Os valores de algumas propriedades sao herdados au¬ 
to maticamente en quanto outros nao. Alem disso, exist em propriedades que nao podem assumir o 
valor proveniente da mesina propriedade do elemento pai. 

Uma propriedade herda o valor do elemento pai quando atribuimos o valor inherit a ela. 

Considere os seguintes codigos: 


1 <div> 

2 <p>l_orem ipsum dolor sit anet, consectetur adipiscing elit,</p> 

3 </div> 


1 div { 

2 color: red; 

3 } 


No exemplo acirna, a propriedade color foi defimda apenas para o elemento div, No elemento p, 
essa propriedade assumira o valor padrao que e inherit, ou seja, sera herdado automaticamente do 
elemento pai. Como consequencia a cor do texto do paragrafo sera vermelha. 

Agora, considere este outro exemplo: 


1 <div> 

2 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

3 </div> 


1 div ( 

2 border: 1 px solid rod; 

3 } 


O elemento div ter a borda de 1 pixel com cor vermelha. Diferentemente do exemplo anterior, o 
paragrafo nao herdara o valor para a propriedade border, pois ela nao possui o valor inherit como 
padrao. Se quisessemos que o elemento p herdasse o valor da propriedade border, deveriamos defi- 
nir as seguintes regras CSS: 


1 

div { 

2 

border: 1 px solid red; 

3 

1 

4 


5 

P ( 

6 

border: inherit; 

7 

} 
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box-sizing (Conteiido Extra) 


De acordo com o box model, devemos levar em considera^ao as margens internas, bordas e as 
propriedades width e height de um elemento para determinarmos as suas dimensdes. No comego, 
isso pode nao parecer muito natural, pois tendemos a imaginar a largura e altura final do elemento 
coino sendo as medidas atribmdas somente as propriedades width e height, respectivamente. Isso 
acaba gerando uma grande confusao, principalmente para quem esta come^ando a aprender CSS. 

Atraves da propriedade box-sizing podemos decidir como as propriedades width e height se 
comportarao. Confira na tabela abaixo os possiveis valores da propriedade: 

content-box 

Comportamento padrao. As propriedades width e height definem as dimensdes da area do con- 
teudo do elemento. 


padding-box 

As propriedades width e height definem as dimensdes da area do conteudo do elemento em 
con-junto com as margens internas. 

border-box 

As propriedades width e height definem as dimensdes da area do conteudo do elemento em 
conjunto com as margens internas e bordas. 


inherit 

Assume o valor da mesma propriedade no elemento HTML pai. 

Veja a figura abaixo para compreender melhor cada um dos valores: 

box-sizing: content-box box-sizing: padding-box box-sizing: bon der-box 



Design Responsivo (Contetido Extra) 
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Durante muito tempo, os com put ad ores tradicionais (desktops e laptops) foram os principals 
dispositivos de acesso a Internet. Nos ultimos anos, uma grande variedade de novos equipamentos 
capazes de acessar a Internet foram introduzidos no mercado. Desses dispositivos podemos destacar 
os smartphones e tablets (dispositivos moveis). 

O numero de usuarios que acessam a Internet atraves de dispositivos moveis esta cada vez maior 
e so tende a crescer. Portanto, os desenvolvedores web devem bear cada vez mais preocupados em 
atender de maneira satisfatoria o publico mobile. 

Atender o publico mobile de maneira satisfatoria significa apresentar o conteudo de uma pagina 
utilizando da melhor forma possivel os recursos do dispositivo. 

Por exemplo, uma pagina pode ter uma usabilidade muito boa quando acessada atraves de um 
desktop. Porem, ao acessa-la atraves de um smartphone, as letras podem bear muito pequenas, o 
conteiido pode nao se encaixar no tamanho da tela ou as interagoes atraves do toque podem nao 
funcionar tao bem se comparadas as interagoes realizadas com o mouse. 

Uma solugao para esse problema seria a criagao de uma versao do site para cada tipo de disposi¬ 
tivo. Geralmente, a versao para desktop e a mais completa e as demais possuem recursos reduzidos. 
Essa e uma solugao adotada por diversos sites. Nonnalmente, as versbes mobile sao acessadas atra¬ 
ves de URLs especificas. Em gerai, essas URLs comegam com mobile, mob ou ate mesmo m (ex: 
http: //m. kekanto. com). Entretanto, antes de adotar essa solugao devemos levantar algumas ques- 
toes: 

Como fica a manutengao do site? 

Muito mais trabalhosa. Basicamente, para cada tipo de dispositivo, teriamos um site diferente, 
ou seja, teriamos que gerenciar dois ou mais sites ao inves de apenas um, 

O que fazer com as URLs do site? 

Para cada tipo de dispositivo uma URL diferente. Por exemplo, uma para mobile (http: //mob. 
domirio, com), outra para tele vis ores {http: //tv. dominio, conn) e outrapara desktops (http: //www. 
dominio, com). Alem disso, deveriamos nos preocupar com o redirecionamento das URLs, pois seria 
mais apropriado que um usuario acessando o endereco www.dominio.com atraves de sua televisao 
fosse redirecionado para tv. dominio. com. 

O usuario vai ficar insatisfeito se ele nao pnder fazer tudo que ele fazia no desktop? 

Sim! Se a versao diferenciada for uma versao reduzida da versao desktop, ele ficara extremamente 
decepeionado. Os usuarios tendem a querer ter todo o poder do desktop nos smartphones e afins. 

Para evitar esses e outros problemas, uma outra solugao que esta ganhando cada vez mais forga 
parte do princlpio de que a pagina deve ser a mesma. O que deve mudar e a forma de apresenta-la 
ao usuario. Essa e a ideia do Design Responsive. 

O design responsive pode ser dividido em tres partes principais: layouts flexiveis, media queries 
e midias flexiveis, A seguir iremos discutir sobre cada parte. 


250 


www.kt9.conn.tar |<CI9 




251 


CSS 


Layouts Flexiveis 

A ideia por tras dos layouts flexiveis e fazer com que os elementos de uma pagina sejam capazes 
de terem as suas dimensoes adapt ad as dinamicamente. Isso e bem inte res saute quando queremos 
que o layout da pagina se adapte a diferentes tamanhos de tela ou alguns elementos sejam redimen - 
sionados apos uma intera^ao do usuario, por exeinplo. 

Quando criamos layouts estaticos, em geral, trabaihamos com unidades de medida estaticas 
como px, pt, in, cm e etc. Ao criarmos layouts flexiveis passamos a trabalhar muito mais com as 
unidades relativas como %, em, ex e etc. Fazemos isso para evitar que ocorram deforma^oes ou 
overflow na apresentagao do conteudo. 

Para facilitar o trabalho de quern desenhara o layout de uma pagina e tambem de quem pro- 
duzira o codigo HTML e CSS, uma tecnica muito comum e a de tentar visualizar a tela como um 
sistema de grades. Nesse sistema, cada grade deve ter as suas dimensoes definidas com unidades de 
medida relativas. Dessa forma, se a tela do usuario for redimensionada, todo o sistema de grade sera 
reajustado. 



Layout estatico 


a a o 

(ZBE 





Layout flextvel 


Media Queries 

Como o objetivo do design responsive e apresentar o conteudo de uma pagina de maneiras dife¬ 
rentes em dispositivos com tamanhos de telas diferentes, em algum momento sentiremos a necessi- 
dade de criar regras CSS para cada tamanho de tela ou para cada conjunto de tamanho de telas. Em 
uma situaqao como essa, as media queries se encaixam perfeitamente e devemos utiliza-las. 

Breakpoints 

O ponto principal da relacao das media queries com o design responsive e a defini^ao daquilo 
que chamamos de breakpoints (pontos de quebra). Muitos auto res costumam definir esses pontos 
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em torno dos tamanhos dos viewports mais comuns como 320px, 480pXj 768PX, 1024px e assim por 
diante, Essa e uma estrategia normalmente charnada de device-driven breakpoints, device-based 
breakpoints on pontos de quebra orientados a dispositivos. Evite essa tecnica, pois, como o proprio 
nome diz, ela faz com que as regras CSS sejam aplicadas quando uma pagina for aberta em dispositi¬ 
vos com tamanhos de tela esperados, ou seja, a pagina podera estar despreparada quando for aberta 
por um dispositivo com tela de 400px, por exemplo. 

Uma estrategia muito mais interessante e a que chamamos de content-driven breakpoints, content- 
based breakpoints ou pontos de quebra orientados ao conteudo. Nessa estrategia definimos os pon¬ 
tos de quebra observando se o conteudo da pagina se acomoda corretamente ao tamanho do view¬ 
port. Uma tecnica muito eficiente e come^ar do menor para o maior tamanho de viewport. Em geral, 
o menor tamanho refere-se aos dispositivos mobile e, por isso, a tecnica recebe o nome de mobile 
first. 

Aplicar a estrategia do content-drive breakpoints junta mente com a tecnica mobile first e re- 
lativamente simples: redimensione a janela do navegador para que o viewport fique com o menor 
tamanho esperado (mobile). Esse sera o primeiro breakpoint. Aplique as regras CSS na pagina e em 
seguida redimensione a janela do navegador ate que o conteudo nao seja ap resent ado corretamente 
ou a pagina tenha o layout "quebrado" Quando isso ocorrer significa que encontramos o proximo 
breakpoint. Nesse breakpoint, aplique as regras CSS para que a pagina volte a ser apresentada corre¬ 
tamente, Repita esse processo ate considerar que tenha definido todos os breakpoints necessaries. 


Midias Flexiveis 

Para criarmos uma pagina que seja confortavel para a leitura, devemos ajustar o posicionamento 
e a dimensao dos eiementos conforme vinios anteriormente. As imagens, players de video e audio 
nao sao exceqoes. Entretanto, quando trabalhamos com certos tipos de midias devemos ter alguns 
cuidados especiais. 


Suponha uma imagem de 320px de largma que gostariamos de exibir em uma pagina de maneira 
que ela se adapte a largura da tela. Conseguiriamos fazer isso utilizando a propriedade width: 100%, 
por exemplo. Veja abaixo como ficaria essa pagina exibida em um smartphone e em um desktop. 



Smartphone 



Desktop 


Na imagem acima podemos perceber que a qualidade da imagem diminuiu ao estica-la. Para 
evitar ou amenizar esse tipo de problema poderiamos criar diversas versoes da imagem, uma para 
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cad a breakpoint. Poderiamos tambemobter uma imagem original detamanho maior, pois, em geral, 
diminuir uma imagem perde menos qualidade do que esticar. Ou ainda, dependendo da imagem, 
poderiamos utilizar uma versao vetorlal da mesma. Como podemos observar, existem diversas tec- 
nicas para resolver esse tipo de problema e, caso tenha inleresse, procure por Icon Fonts, formato de 
imagem SVG e Compressive Images. Esses sao termos muito utiHzados por tecnicas de otimizagao 
de imagens na web. 

No caso dos players de video e audio recomendamos a leitura do artigo neste endere^o: http: 
//alistapart . com/article/creating-intrinsic-rati os- for-video 

Exerclcios Complementares 


@ No projeto css, crie um arquivo chamado background-color.html. 


1 

2 

3 

4 

5 

6 

7 

8 
3 

10 

11 

12 

13 


<!DOCTYPE html> 
chtml lang=' r pt -br"> 
chead> 

cmeta http -equiv = J| Content-Type" content^ H test/html ; ch,arset = UTF-B" > 
ctitle>K19 - background-color</title> 

clink rel = H stylesheet ,r type=" text /css ' r href= H background -color . css "> 

c/head> 

cbody> 

cdiv id= n divl "></div> 
cdiv id- |J div2 " ></ div> 
cdiv id=" div3 "></div> 
c/body> 
c/html> 


Cortigo HTML 3.38: background-color, h tml 


AiCjUiUO: https://gittiub.caa/KI9/KI9-Exercicio5/archive/kG2-css-complementarl , zip 


O No projeto css, crie um arquivo CSS chamado background-colorxss. 


1 

div { 

2 

height : 100px; 

3 

width: 4Q0px; 

4 

} 

5 


6 

#div1 { 

7 

background-color: red; 

8 

1 

3 


10 

#div2 { 

11 

background-color: flOQffOO; 

12 

} 

13 


14 

#div3 { 

15 

background-color: rgb(0, 0 r 255); 

16 

1 


Codfgo CSS 3.60 ; background-cotoncss 


Arquivo: https://github.com/K19/K13-EKercicios/archive/k02-css-complementar2.zip 
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O No Windows, utilize o Chrome para acessar o endere^o: 


h 11 p://loca1host/css/pu blic_htrail /ba ckground-color.html. 

No Ubuntu, utilize o Chrome para acessar o enderego: 


h 11 p: / / lo ca 1 host / ™< USU AR I0> / c ss /pub 1 i c_h t ml / ba ckg rou nd- colo r . h tml. 


@ No projeto css, crie um arquivo chamado background-image.html. 


1 <!DOCTYPE html> 

2 <htm 1 lang = "pt-br'■ > 

3 <head> 

4 <meta http-equiv=" Content-Type ” content^" text/html ; charset=UTF-5" > 

5 <title>K19 - background-image</1 i tle> 

6 <1 ink rel = ™ stylesheet ir type= p text/css ,r href = p background - image . css J| > 

7 <7head> 

S <body> 

9 

10 </body> 

11 </h tml> 


Codigo HTML 3.39: background-image.htmt 


Arquivo: https://github.com/KI9/K19-Exercicios/archive/k02-css-complementar4.zip 


0 No projeto css, crie um arquivo CSS chamado background-imagexss. 


1 body i 

2 background - image: 

3 url{ "http : //www . kl 9 . com . br/figs/planeta . png" }, 

4 urlC "http://www . kl9 . com . br/figs/fundo . jpg" }; 

5 } 


Codigo CSS 3.61: background - in uige.css 


Arquivo: https://github. com/K!9/Kl9-ExercLci0s/archive/kO2-css-complementar5. zip 


Q No Windows, utilize o Chrome para acessar o endere^o: 


http: /i loca1host/css/public_html/background-image.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http://local host/~<usUARIQ>/css/public_htnil/background-image.html. 


O 


No projeto css, crie um arquivo chamado b ackground-repeat .html. 


1 <! DOCTYPE html> 

2 <html lang = ?l pt - br" > 

3 <head> 

4 <meta http-equiv^ 1 2 3 4 5 6 7 * 9 Content-Type" content^” text/html ; charset=UTF-S" > 

5 <title>K19 - background - repeat</title> 

6 clink rel= rJ stylesheet ir type= p text/css" href= p background - repeat.css p > 

7 </head> 

3 <body> 

9 cdiv id = r 'div1 Jl x/div> 
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10 

<div 

id = 

11 

<div 

id= 

12 

<div 

id- 

13 

</body> 


14 

</html> 



" div2" ></ div> 
|J div3 n ></ div> 
|J div4" ></div> 


Cddigo HTML 3 JO: background repeat him! 


AlCfUiuo: https: //github. con/K19/Kl 9-Exercicios/archive/k02-cs5-cofnplementar7 .zip 


O 


No projeto css, crie um arquivo CSS chamado background-rep eat. css. 


1 

div { 

2 

height: 300 px; 

3 

width: 4Q0px; 

4 

border: 1 px solid black; 

5 

margin,: 10px; 

6 

7 

} 

3 

#div1 { 

9 

background - image : url ('* ht tp : //www . kl 9 . com .br/figs/planeta- small , png "} ; 

10 


11 


12 

#div2 { 

13 

background - image : url {"http ://www. kl 9 . com. br/figs/planeta - small . png J| ) ; 

14 

background-repeat: no-repeat; 

15 

} 

16 


17 

#div3 { 

18 

background - image : url ( |J http : //www. kl 9 . com. br/figs/planeta - small . png") ; 

19 

background-repeat: repeat-x; 

20 

} 

21 


22 

#div4 { 

23 

background - image : url {” http : //www. k 1 9 . com. br/figs/planeta - small. png J| ) ; 

24 

background-repeat: repeat -y; 

25 

} 


Cddigo CSS 3.62: background-repeat, css 


Arquivo: https: //github.com/KlS/KI9-Exercicio5/archive/k02-css-complementar3 . zip 


0 No Windows., utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/background-repeat , html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


h 11 p://loca1host/~< U5UARI0> /css/ pub1ic_h t ml/backg rou n d-r epeat.h tml . 


© No projeto css, crie um arquivo chamado background-attachment.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 


<lDOCTfP£ html> 

< ht m 1 lang="pt-br''> 

<head> 

<meta http-equiv^ 1 Content-Type " content^ 1 ’ test/ html ; charset=UTF-8" > 
<title>K19 - background -attachment</title> 

<Iink rel = rJ stylesheet " type— p text/css " href= n background - at tachment . css "> 
</head> 

<body> 
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10 

11 


</body> 
</html> 


Cddigo HTML 3. 41: background-attachment ti tml 


Arquivo: https: //github. com/KIS/KI 9-Exercicios/archive/kQ2-css-complejTientar10 . zip 


© No projeto css, crie um arquivo CSS chamado background-attachment,css. 


1 body i 

2 height: 2000px; 

3 background - image : ur 1 ( |J ht tp : // www . kl 3 . com ,br/ f igs / f undo . jpg J| } ; 

4 j 


Cddigo CSS 3.63: backgiowid-atmchment.css 


Arquivo : https://github.com/Kf97K19-Exerc£cL05/archive/kQ2-css-complementar1 I .zip 


© No Windows, utilize o Chrome para acessar o enderego: 


ht tp://localhost/css/pu blic _h t ml/ba c k ground-a t ta c hment.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://local host/~<USUARIG>/css/public_htnil/background-attachment . htmL 

Observe o comportamento da imagem de background quando voc§ movimenta a barra de ro- 
lagem. 


© No projeto css, altere o arquivo CSS backgroimd-attachment.css. 


1 body { 

2 height: 20QGpx; 

3 b a ckg r oun d - i ma ge : u r 1 ( |J h 11 p : / / www .k19.com.br/figs/fundo , jpg J| ); 

4 [ background-attachment : fixed; 

5 1 


Cddigo CSS 3.64: background attachmsnt.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementarl3.zip 


^ No Windows, utilize o Chrome para acessar o end ere go: 


http://localhost/css/public_html/background-attachment.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://loca1host/USUARI0>/css/pub1ic_h t ml/backgrou nd-at t ac hme n t. ht m 1 . 

Observe o comportamento da imagem de background quando voc£ movimenta a barra de ro- 
lagem. 


© No projeto css, crie um arquivo chamado background-positioii.html. 
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1 <!DOCTVPE html> 

2 <html lang = ' r pt-br" > 

3 <head> 

4 cmeta http-equiv = JI Content-Type" content^ 1 ' text/html ; charset=UTF-B " > 

5 <title>K19 - background-position</title> 

6 clink pel- - stylesheet 11 type- - text /css " href=■' background - posit ion . css "> 

7 </head> 

3 <body> 

9 

10 </body> 

11 </html> 


Cortigo HTML 3.42: background-position.html 


AtCflliuo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar15,zip 


^ No projeto css, crie um arquivo CSS chamado background-positionxss. 


1 body i 

2 background - image: url("http://www . kl9 . com.br/figs/planeta-small.png" }; 

3 background-repeat: no-repeat; 

4 background-position: center top; 

5 1 


Gddigo CSS 3.65: backgroiuid-posinon.css 


AiCfUivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar16. zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://loca1host/css/public_ht ml/ba c k ground-position.html . 


No Ufountu, utilize o Chrome para acessar o endereco: 


ht tp://loca1host/~<USUAR10>/css/pub1ic_h t ml/ba c kgrou nd-position.html. 


© No projeto css, crie um arquivo chamado background-clip,html. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 


<!DQCTYPE html> 

<html lang = ' r pt-br "> 

<head> 

cmeta http-equiv- JI Content-Type r ' content^ 1 ' text/html ; charset = UTF-S JI > 
<title>K19 - background-clip</title? 

<link rel= "stylesheet" type-" text/css" href-" background-cl ip . css IJ > 
</head> 

<body> 

<div id=" divl "></div> 

<div id=" div2 ,r x/div> 

<div id=" div3 ,r x/div> 

</body> 

</html> 


Codigo HTML 3.43: bnckgFtwnd-dip.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-camplenientar13 . zip 


No projeto css, crie um arquivo CSS chamado background-clip, css. 
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1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 


div { 

width: 400px; 

height : 50px ; 

margin: lOpx; 

padding: 50px; 

border: lOpx dotted black; 

background-color: yellow; 

1 

ttdivl { 

background-clip: border-box; 

} 

#div2 { 

background-clip: padding-box; 

} 

#div3 { 

background-clip : content-box; 

} 


Codigo CSS 3.66: background-dip,css 


ArCfUivo: https://github.com/KI9/K19-Exercicios/archive/kOZ-css-complementarl9 .zip 


© No Windows., utilize o Chrome para acessar o endere^o: 


http: //loca1host/css/public_html/background-clip. html. 


No Ufountu, utilize o Chrome para acessar o endere^o: 


h t tp://loca 1 host/~<USUARIO>/c ss/pub1i c_h t ml/backg rou nd-clip.html. 


0 No projeto css, crie um arquivo chamado background-origin .html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


< ! DGCTYPE html > 
chtrnl lang="pt-br' r > 

<head> 

<meta http -equiv = ,ir Con tent - Type |J content^" text/html; charset-UTF-fi J| > 
<title>K19 - background-origin</title> 

<1 ink rel = "stylesheet " type-” text/css " href=" background-origin . css "> 
</head> 

<body> 

<div id=" divl " ></ div> 

<div id=" div2 '‘></div> 

<div id=" div3 "></ div> 

</body> 

</html> 


Codigo HTML 3.44: background-origin Jitmt 


Arquivo: https: //github.com/K19/K19-Exercicios/archive/kOZ-css-complementar21 . zip 


© No projeto css, crie um arquivo CSS chamado background-origin, css. 


1 div i 

2 width: 4Q0px; 

3 height: 100 px; 

4 margin: lOpx; 

5 padding: 25px; 
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6 

7 

3 

9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 


border. lOpx dotted black; 
background-repeat: no-repeat; 

background - image : ur 1 ( r ' ht tp : / / www. kl 9 . com . br / figs/ plane ta - Email. png J| ) ; 

} 

ttdivl { 

background-origin: border-box; 

} 

#div2 { 

background-origin : padding-box; 

} 

#div3 { 

background-origin: content-box; 

} 


Codigo CSS 3.67: background-origin css 


Arquivo: https://github.com/K19/K19-ExerciciQs/archive/k02-css-c-omplementar22 . zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://loca1host/css/public_htrail/background-origin , html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


h 11 p ://loca 1 host/~< USUAR IO> /css/ pub 1i c_h t ml/backg rou nd-origi n.h tml . 


© 


No projeto css, crie um arquivo chain ado background-size*html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


<!DOCT/PE html> 

<html lang=" pt - br' 1 > 

<head> 

<meta http -equiv = ! " Content-Type " content^" text/html ; charset = UTF -8 " > 
<title>Kl9 - background -size</title> 

<link re 1 = " stylesheet ,r type= N text/css Jr href = " background - size . css r > 
</head> 

<body> 

<div id=" div1" ></ div> 

<div id= rt div2 "></div> 

<div id=” div3" ></div> 

</body> 

</html> 


Codigo HTML 3.4b: backgroiind-size.html 


Arquivo: https: //gi thub.com/K1 VKI9-Exercicios/archive/k02-css-complementar24, zip 


© 


No projeto css, crie um arquivo CSS chamado background-size.css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


div { 

width: 4QGpx; 

height: 100px; 

margin: lOpx; 

padding: 25px; 

border: lOpx dotted black; 

background-repeat: no-repeat; 

background -image: url ("http : //www . kl 9 . com. br/figs/planeta - small. png’") ; 
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11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 


#div1 { 

background-size: 50px auto; 

} 

#div2 { 

background-size: cover; 

} 

#div3 { 

background-size: contain; 

} 


Codigo CSS 3.68: background-size, css 


Arquivo: https://github. com/Kf9/K19-Exercicios/archive/k02-css-co{nplementar25, zip 


@ No Windows, utilize o Chrome para acessar o ertdere^o: 


http://localhost/css/public_html/background-size,html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost/~<USUARIO>/css/pub1ic_h t ml/backg rou rid-size.html. 


@ No projeto css, crie um arquivo chamado color,html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


<!DOCTYPE html> 

<html lang = ' r pt-br"> 

<head> 

<meta http-equiv=" Content-Type" content=" text/html ; charset = UTF-3" > 
<title>K19 - color</title> 

<1 ink re 1 = " stylesheet" type=" text /css '■ href =l ’ color . css r '> 

</ head> 

<body> 

<p id=" pi Jl >K1 9 Treinamentos</p> 

<p id = IJ p2">K19 Treinamentos</p> 

<p id = ,J p3">K19 Treinamentos</p> 

</body> 

</html> 


Codigo HTML 3.46: color.html 


ArqittVO: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar27. zip 


No projeto css, crie um arquivo CSS chamado colorless. 


1 

#P1 i 

2 

color: red; 

3 

1 

4 


5 

#P2 ( 

6 

color: #0Qff£)Q; 

7 

1 

3 


9 

#p3 t 

10 

color: rgb(0, 0, 255) ; 

11 



Codigo CSS 3.69: color.css 
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Arqatvo: https://github.com/K197K19-ExerciciQ5/archive/k02-css-complementar23,zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http: //loca 1 host/css/publicjrtml/color , html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


http: //loca 1 host/~<USUARIO>/css /pub lic_html/color. html. 


@ No projeto css, crie um arquivo chamado text-align, html. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 


<S DOCTVPE html> 

<html lang=" pt -br' 1 2 3 4 > 

<head> 

<meta http-equiv = ' r Content-Type" content^" text/html ; char set = UTF-S J| > 
<title>K19 - text-align</title> 

<Iink rel= " stylesheet Jr type =" text /css href=" text -align . css ” > 

</head> 

<body> 

<p id = "pi " > 

Loren ipsun dolor sit amet h consectetur adipiscing elit. In 
mollis r nibh et temper soilicitudin , orci lorern iaculis sem, 
sit amet sodales quan nassa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

<p id = |J p2"> 

Loren ipsun dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et temper soliicitudin, orci lorern iaculis sem, 
sit amet sodales quam nassa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

<P i d = " p3 ■" > 

Loren ipsun dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor soliicitudin, orci loren iaculis sem, 
sit amet sodales quan nassa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae, Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

<p id=”p4"> 

Loren ipsun dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor soliicitudin, orci loren iaculis sem, 
sit amet sodales quan nassa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

</body> 

</html> 


CodigoHTML3.47: text-align.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar30 . zip 


© No projeto css, crie um arquivo CSS chamado text-align, css. 


1 p t 

2 border: 1px solid black; 

3 width: 400px; 

4 1 
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5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 


#pl t 

text-align: left; 

#P2 t 

text-align: center; 

} 

#p3 { 

text-align: right; 

1 

#p4 { 

text-align: justify; 

1 


Codigo CSS 3.70: text-align.css 


Arquivo: https://github. com/Kl 97K19-Exercicios/archive/k02-css-cofnplementar31 , zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/text-align,html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<U5UARIO>/css/public_html/text-align . html. 


© No pro je to ess, crie um arquivo chain ado text-decoratiQii.html, 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 


< ! DGCTTPE html > 

<ht,ml lang = ''pt-br"> 

<head> 

<meta http-equiv = JI Content-Type" content-" text/html ; charset=UTF-fi J| > 
<title>K19 - text-decoration</title> 

<link rel = "stylesheet" type- "text/css" href=" text-decoration . css r/ > 
</ head> 

<body> 

<P id = "pl"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, In 
mollis, nibh et temper soliicitudin , orci lorem- iaculis sem, 
sit amet sodales quant massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis, 

</p> 

<p id = |J p2 J| > 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, In 
mollis, nibh et tempor soliicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis, 

</p> 

<p id="p3"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor soilicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis, 

</p> 

</body> 

</html> 


Codigo HTML 3.43: text-decoration, htoil 
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Ai'CfUiVO: https://github.com/K19/Kl 9-Exercicio5/archive/k02-css-complementar33 , zip 


© 


No projeto css, crie um arquivo CSS chamado text-decoratio n,css. 


1 

P { 

2 

width: 4Q0px; 

3 

} 

4 


5 

#P1 t 

6 

text - decoration: underline; 

7 

1 

3 


9 


10 

text-decoration : overline; 

11 

1 

12 


13 

#p3 { 

14 

text-decorat ion: line - through; 

15 

1 


Codigo CSS 3, 71: text-decoration.css 


ArCflliuo: https://github,com/K19/K19-Exercicios/archive/k02-css-complementar34.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http: //loca1host/css/public_html/text-decoration , html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //loca1host/~<USUARIO>/css /public_html / text-decorat ion , html. 


No projeto css, crie um arquivo chamado text-transform.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 


<!DOCTYPE html> 

<html lang=" pt -br Hl > 

<head> 

<meta http - equi v = J| Content - Type p content^ text/html ; charset=UTF-S J| > 
<title>K13 - text-transform</title> 

<link rel = IJ stylesheet" type = ’’ text /css Jl href=" text - transform . css "> 
</head> 

<body> 

<p id = |J p1 "> 

Lorern ipsum dolor sit amet f consectetur adipiscing elit, In 
mollis, nibh et temper soliicitudin , orci lorern iaculis sem, 
sit amet sodales quart ntassa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis, 

</p> 

<p id = IJ p2/'> 

Lorern ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et temper soil icitudin , orci lorern iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis, 

</p> 

<p id="p3"> 

Lorern ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor soilicitudin, orci lorern iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae, Nullam consequat 
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23 

29 

30 

31 


Cortigo HTML 3.49: text-transform.htmi 


leo nunc, in ornare turpis aliquam quis. 
</p> 

</body> 

</html> 


AlCjUiVO: https://github.cQm/KtS/KI9-Exercicios/archive/k02-css-complementar36 , zip 


© No projeto css, crie um arquivo CSS chamado text-trails formxss. 


1 

P { 

2 

width: 400px; 

3 


4 


5 

#p1 { 

6 

text -1ransform: capitalize; 

7 

} 

3 


9 

#p2 { 

10 

text-transform: uppercase; 

11 


12 


13 

#p3 { 

14 

text-transform: lowercase; 

15 



Cod t go CSS 3 . 72: text- transfoTm.css 


Arquivo: h tips : //github.com/Kl9/K19-Exercicios/archive/k02-css-complementar37 . zip 


© 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/pu bli c_html/ te x t - 1 ransfo rm. h tml. 

No Ubuntu, utilize o Chrome para acessar o endereco: 


http: / ,/localhost/^<USUARIO>/css/public_h tml/text-t ransform. html. 


© No projeto css, crie um arquivo chamado text-indent, h tml. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 


< ! DOCTTPE html > 

< h t m 1 lang = " pt -br'' > 

<head> 

<meta http-equiv=" Content-Type" content^" text/html ; charset-UTF-B" > 
<title>K19 - text-indent</title> 

<link rel = H stylesheet " type- 1 ' text / css ,r href =" text- indent . css "> 

</head> 

<body> 

<p id="pl ,r > 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, In 
mollis, nibh et tempor soliicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis, 

</p> 

<p id = "p2''> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et tempor soilicitudin, orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae, Nullam consequat 
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21 

22 

23 

24 


Codigo HTML 3.50: text-indent.html 


leo nunc r in ornare turpis aliquam quis. 
</p> 

</body> 

</tit ml > 


Arquivo: https://github.com/K19/K19-Exercicio5/archive/k02-css-complementar39.zip 


0 No projeto css, crie um arquivo CSS chamado text-indent .css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 


P ( 

width: 400px; 

1 

#pT { 

text-indent: Opx; 

} 

#p2 { 

text-indent: 30px; 

} 


Codigo CSS3.73: text-indent.css 


ArCfUiUO'r https:github.com/K19/K19-Exercicios/archive/k02-css-complementar40.zip 


O 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publicjitml/text-indent.html. 

No Ubuntu, utilize o Chrome para acessar o enderego: 


http: / /localhost/~<U5UAFI0>/css/public_html/text-indent.html . 


© No projeto css, crie um arquivo chamado letter-spacing,html. 


1 

<!DOCTYPE html > 

2 

<html lang=" pt-br " > 

3 

<head> 

4 

<meta http-equiv = JI Content-Type" content^ " text/html ; charset-UTF-B" > 

5 

<title>K19 - letter- spacing</title> 

6 

<link re 1 = r ' stylesheet " type =" text /css href =" letter - spacing . css ' r > 

7 

</head> 

3 

<body> 

9 

<p id="pl"> 

10 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 

11 

</p> 

12 

<p id-”p2 ,r > 

13 

Loren ipsun dolor sit amet t consectetur adipiscing elit. 

14 

</p> 

15 

<p id = |J p3"> 

16 

Loren ipsun dolor sit amet r consectetur adipiscing elit. 

17 

</p> 

13 

<p id-”p4 ,r > 

19 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 

20 

</p> 

21 

</body> 

22 

</html> 


Codigo HTML 3.51: letter-spacing, html 
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Ai'CJUiVO: https://github.com/K197K19-Exercicios/archive/k02-css-complementar42,zip 


@ No projeto css, crie um arquivo CSS chamado letter-spaciiig.css. 


1 

#PT t 

2 

letter-spacing: 2px; 

3 

1 

4 


5 

#P2 { 

6 

letter-spacing : -2px; 

7 

} 

3 


9 

#p3 { 

1C 

letter-spacing: 4px; 

11 

1 

12 


13 

#p4 { 

14 

letter-spacing: 6px; 

15 



Codigo CSS 3.74: letter-spacing, css 


Arquivo: https://github.com/K19/K19-ExerciciQ5/archive/kG2-c55-compIeinentar43 , zip 


© 


No Windows., utilize o Chrome para acessar o enderego: 


http://localhost/css/publicjitml/letter-spacing.html. 


No Ubunlu, utilize o Chrome para acessar o enderego: 


http: //loca1host/~<USUARIO>/css/public_html/letter-spacing.html. 


© No projeto css, crie um arquivo chamado word-spacing*html. 


1 

<!DOCTYPE html> 

2 

< ht m 1 lang=" pt-br' 1 > 

3 

<head> 

4 

<meta http-equiv = : " Content-Type 0 content ='' text / html ; charset=UTF -B" > 

5 

<title>K19 - word-spacing</1itle> 

6 

<1 ink rel= rJ stylesheet lr type^" text /css *' href=" word- spacing . css "> 

7 

</head> 

3 

<body> 

9 

<P i d — " p 1 1,1 > 

10 

Loren ipsun dolor sit amet f consectetur adipiscing elit. 

11 

</p> 

12 

<p id= u p2"> 

13 

Loren ipsun dolor sit amet t consectetur adipiscing elit. 

14 

</p> 

15 

<p id="p3' r > 

16 

Loren ipsun dolor sit amet f consectetur adipiscing elit. 

17 

</p> 

13 

<p id="p4"> 

19 

Loren ipsun dolor sit amet f consectetur adipiscing elit. 

20 

</p> 

21 

</body> 

22 

</html> 


Codigo HTML 3.52: word-spacing.htn!I 


Arquivo: https://github.com/Kt9/K19-Exercicios/archive/k02-css-coinplementar45 . zip 


266 


www.k19.com.br ■ KI9 








267 


CSS 


@ No projeto css, crie urn arquivo CSS chamado word-spacing.css. 



ArCfltivo: https://github.com/K19*/K19-ExercicLos/archive/kG2-css-CQmplementar46 , zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


h 1 1 p: V /loca1 host / css /pu bl i c_ht ml / wo r d - s pac i ng , h tsnl , 


No Ubuntu, utilize o Chrome para acessar o enderego: 


h 11 p://lo ca1host/~<USUARI0>/css/pub1ic_h t ml/wo rd-spacing.html. 


© 


No projeto css t crie um arquivo chamado word-wrap.html. 


1 <!DOCTYPE html > 

2 <html lang = jr pt-br■" > 

3 <head> 

4 <meta http-equiv= "Content-Type " content-" text/ html ; charset=UTF-8 " > 

5 <title>K19 - word-wrap</title> 

6 <link re 1-" stylesheet 11 type—” text/css" href=" word -wrap . css "> 

7 </head> 

S <body> 

9 <p id = " pi J| > 

10 Gtorrinolarin-gologista . 

11 </p> 

12 <p> 

13 Qtorrinolaringologi sta. 

14 </p> 

15 </body> 

16 </html> 


Codigo HTML 3.53: word-itfrap.html 


Arquivo: https://github.com/K19/K19-ExercicLos/archive/kG2-css-complementar48. zip 


@ No projeto css, crie urn arquivo CSS chamado word-wrap,css. 


1 

2 

3 

4 

5 


P i 

width: lOOpx; 

border: 1 px solid black; 

} 


KIS www. f ac ebook. com/k 1 9trei nam entos 


267 











css 


268 


6 #p1 { 

7 word-wrap: break-word; 
3 1 


Cod:go CSS 3.76: word-wrap, css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-cc*nplementar49.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


h 11 p: / /loca1 host/ css /pu bl i c_ht ml / wo r d - w rap. h t ml . 


No Ufountu, utilize o Chrome para acessar o endereco: 


h 11 p://loca1host/~<USUARI0>/css/pub1ic_ht ml/wo rd-wrap.htmL 


© No projeto css, crie um arquivo chamado line-height .html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 


<!DQCTYPE html> 

<html lang = ' r pt-br n > 

<head> 

<meta http-equiv = J| Content-Type" content- 1 ’ text/html ; charset=UTF-G " > 
<title>K19 - line-height</title> 

<link re 1-” stylesheet ,r type = l:1 text/css href=" line -heigh t . css "> 
</head> 

<body> 

<p id = "pT JI > 

lorem ipsum dolor sit amet, consectetur adipiscing elit, In 
mollis, nibh et tempor soilicitudin , orci lorem iaculis sem, 
sit amet sodales quam ntassa sit amet risus. Fusee malesuada 
eleifend massa , ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

<p id-"p2' r > 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, In 
mollis, nibh et tempor soliicitudin , orci lorem iaculis sem, 
sit amet sodales quam massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermenturn vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis, 

</p> 

</body> 

</html> 


Cod:go HTML 3.54: line-heigh L html 


Arquivo: https://github.com/K \ 9/K19-Exercicios/archive/k02-css-complementar5 1. zip 


|^i 


No projeto css* crie um arquivo CSS chamado line-height, css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 


P l 

width: 400px; 

border: 1 px solid black; 

1 

#p1 { 

line-height: 20px; 

1 

#P2 { 

line-height: 40 px; 

} 
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Codigo CSS3.77: line-height.as 


Arquivo: https: //github.com/KI9/K19-Exercicios/archive/k02-css-coinplementar52.zip 

@ No Windows, utilize o Chrome para acessar o endere^o: 


http ://localhost/css/publiCLhtirl/line-height.html. 


No Ubimtu, utilize o Chrome para acessar o enderego: 


http://loca1host/~<USUARIG>/css/publicjitml/line-height.html. 


@ No projeto css, crie um arquivo chamado white-space.html. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 
2S 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 

44 

45 

46 

47 
43 


< !DOCTYPE html> 

<html lang = " pt-br' 1 > 

<head> 

<meta http-equiv = " Content-Type 1,1 content^" text/html ; charset = UTF -fl" > 
<title>K19 - white-space</title> 

<link rel = n stylesheet ir type= p text/css ,r href ="white-space . css "> 
</head> 

<body> 

<P id = " pi "> 

Lorem 

ipsum dolor sit amet r consectetur adipiscing elit, Cras vehicula 
bibendum arcu. 

Sed 

dui nulla, cursus et lacinia eu, vulputate ac dolor, 

Quisque faucibus congue congue, 

</p> 

<p id = "p2*'> 

Lorem 

ipsum dolor sit amet r consectetur adipiscing elit, Cras vehicula 
bibendum arcu. 

Sed 

dui nulla, cursus et lacinia eu, vulputate ac dolor. 

Quisque faucibus congue congue, 

</p> 

<p id= H p3"> 

Lorem 

ipsum dolor sit amet t consectetur adipiscing elit. Cras vehicula 
bibendum arcu, 

Sed 

dui nulla, cursus et lacinia eu, vulputate ac dolor, 

Quisque faucibus congue congue, 

</p> 

<p id = "p4''> 

Lorem 

ipsum dolor sit amet , consectetur adipiscing elit, Cras vehicula 
bibendum arcu, 

Sed 

dui nulla, cursus et lacinia eu, vulputate ac dolor. 

Quisque faucibus congue congue, 

</p> 

<p id =" p5" > 

Lorem 

ipsum dolor sit amet f consectetur adipiscing elit, Cras vehicula 
bibendum arcu. 
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49 

50 

51 

52 

53 

54 

55 


Sed 

dui nulla, cursus et lacinia eu, vulputate ac dolor, 
Quisque faucibus congue congue. 

</p> 

</body> 

</html> 


Codigo HTML 3. 55: wh He-space, krm t 


Arquivo: https://github.com/K19/K19-Exercicios/archive/kG2-css-complementar54 . zip 


© No projeto css, crie um arquivo CSS chamado white-space, css. 


1 

P t 

2 

width: 400px; 

3 

border: 1px solid black; 

4 

} 

5 


6 

#pl {. 

7 

white-space: nowrap; 

3 

} 

9 


10 

#P2 { 

11 

white-space: pre; 

12 

1 

13 


14 

#P3 i 

15 

white-space: pre-line; 

16 

1 

17 


13 

#p4 { 

19 

white-space: pre-wrap; 

20 

1 


Codigo CSS 3.78: white-space.css 


Arquivo: https://github.com/KIS/KI9-Exercicios/archive/k02-css-complementar55. zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://loca1hos t/css/public _ht ml/whit e- space.h tnl , 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USUARIG>/css/public_html/white-space. html. 


© No projeto css* crie um arquivo chamado text-shadow,html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 


<!DOCTYPE html> 

<html lang = ' r pt-br "> 

<head> 

<meta http-equiv = J| Content-Type" content-” text/html ; charset=UTF-8 J| > 
<title>K19 - text-shadow</title> 

<link rel = ” stylesheet *' type=" text/css' r href=" text-shadow . css "> 
</head> 

<body> 

<p id = " pi Jl > 

Loren ipsum dolor sit amet, coosectetur adipiscing elit, 

</p> 

<P id-".p.2 ,r > 
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13 

Lorem ipsun dolor sit 

14 

</p> 

15 

<p id-"p3 ,r > 

16 

Loren ipsun dolor sit 

17 

</p> 

18 

<P id="p4 ,r > 

19 

Loren ipsun dolor sit 

20 

</p> 

21 

<p i d =" p5 J| > 

22 

Loren ipsun dolor sit 

23 

</p> 

24 

</body> 

25 

</html> 


amet , 

consectetur 

adipiscing 

el it 

amet r 

consectetur 

adipiscing 

el i t 

amet , 

consectetur 

adipiscing 

elit 

amet , 

coosectetur 

adipiscing 

elit 


CodigoHTML3.56: text-shadow.html 


Arquivo: https://github.com/Ki9/K19-ExercicLos/archive/k02-css-CQmplementar57.zip 


© No projeto css, crie um arquivo CSS chamado text-shadow.css. 


1 

P { 

2 

font-size: xx-large; 

3 

1 

4 


5 

#pl t 

6 

text-shadow: 3px 3px #ff00Q0; 

7 

1 

3 


9 

#P2 { 

10 

text-shadow: -3px -3px flffOOOO; 

11 

1 

12 


13 

#p3 { 

14 

text-shadow: 0 0 lOpx ffffOOOO; 

15 

1 

16 


17 

#P4 { 

18 

text-shadow: lOpx lOpx lOpx #ff0000; 

19 

} 

20 


21 

#p5 { 

22 

text-shadow: 5px 5px 5px #ffOOQO, -5px -5px 5px #0000 ff; 

23 

1 


Codigo CSS 3.79: text-skadow.css 


ArqUil/O: https://github.com/K15/K19-Exercicios/archive/kG2-css-complementar58 .zip 

© No Windows, utilize o Chrome para acessar o endere^o: 

http:// loca 1 h ost / css /pu bl i c_h tuil/text-s hadow. h tml , 

No Ubuntu, utilize o Chrome para acessar o enderego: 

http : //loca 1 host /'<USUARIO>/ css/ pub1i c_html/text-shadow. html. 


0 No projeto css, crie um arquivo chamado fonf-famiIy.html 


1 <!DOCTYPE html> 

2 <html lang = ' r pt-br J| > 

3 <head> 
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<meta http-equiv= "Content-Type" content- "text/html; charset=UTF-fl" > 
<title>K19 - font-family</ title> 

<link rel= "stylesheet" type = "text/css" href= "font - family.css n > 
</head> 

<body> 

<P id = "p1"> 


10 

Lorem ipsum 

dolor 

sit 

amet r 

consectetur 

adipiscing 

elit 

11 

</p> 







12 

<p id="p2"> 







13 

Lorem ipsum 

dolor 

sit 

amet f 

consectetur 

adipiscing 

elit 

14 

</p> 







15 

<p id=”p3"> 







16 

Lorem ipsum 

dolor 

sit 

amet r 

consectetur 

adipiscing 

elit 

17 

</p> 







18 

<p id = M p4 l "> 







19 

Lorem ipsum 

dolor 

sit 

amet f 

consectetur 

adipiscing 

elit 

20 

</p> 







21 

<p id = |J p5 J| > 







22 

Lorem ipsum 

dolor 

sit 

amet r 

consectetur 

adipiscing 

elit 

23 

</p> 







24 

</body> 







25 

</html> 








Cddigo HTML 3.57: pi i t-famify h tm l 


Arquivo: https://github.com/KIS/KI9-Exercicios/archive/k02-css-complernentar60*zip 


m 


No pro]eto css, crie um arquivo CSS chamado font-family,css. 


1 

P { 

2 

font-size: xx-large; 

3 

1 

4 


5 

#p1 { 

6 

font-family: "Arial"; 

7 


8 


9 

#P2 { 

10 

font-family: "Courier’"; 

11 

} 

12 


13 

#p3 { 

14 

font-family: "Verdana"; 

15 


16 


17 

#p4 { 

IS 

font-family: "serif"; 

19 


20 


21 

#p5 { 

22 

font-family: "cursive"; 

23 

1 


Cddigo CSS 3.S0: pnt-family.css 


Arquivo: https;//github,com/KlS/KI 9-Exercicio5/archive/k02-css-complementar61 . zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http://loealhost/css/publicjhtml/font-family.html. 

No Ubuntu, utilize o Chrome para acessar o enderego: 
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http: //localhost/-CUSUARIO/css/public_html/font-family, htutL 


@ No projeto css, crie um arquivo chamado font-size,html. 


1 

<!DGCTfPE html> 

2 

<html lang = ''pt-br"> 

3 

<head> 

4 

<tneta http -equi " Con tent - Type r ' content=" text/html ; charset-UTF-S'" > 

5 

<title>K19 - font-size</title> 

6 

<link rel = " stylesheet ,r type = l# text/css ,r href=" font-size . css "> 

7 

</head> 

3 

<body> 

9 

<p id-"p1 JI > 

TO 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 

11 

</p> 

12 

<p id= h p2' r > 

13 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 

14 

</p> 

15 

<p id="p3 ,r > 

16 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 

17 

</p> 

18 

<p id-"p4'"> 

19 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 

20 

</p> 

21 

<p id“?p5 pr > 

22 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 

23 

</p> 

24 

</body> 

25 

</html> 


Codigo HTML 3.58: foil t-size. h tint 


Arquivo: https://github.com/Kl9/K19-Exercicio5/archive/kG2-css-complementar63. zip 


© No projeto css, crie um arquivo CSS chamado font-size,css. 


1 

#p1 { 

2 

font-size: >:-small ; 

3 

1 

4 


5 

#p2 { 

6 

font-size: x-large; 

7 

1 

8 


9 

#P3 t 

10 

font-size: xx-large; 

11 

1 

12 


13 

#p4 { 

14 

font-size: 18px; 

15 

} 

16 


17 

#p5 { 

IS 

font-size: 30px; 

19 

} 


Codigo CSS 3.81: fonr-size.css 


Arquivo: https://github.com/Kl9/K19-ExercicLQ5/archive/kQ2-css-complementar64. zip 


© No Windows, utilize o Chrome para acessar o endere^o: 
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http://iGcalhost/css/piiblic Jitmi/font-size.html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


h 11 p://lo ca1host/~<USUARI0>/css/pub1ic_h t ml/fon t-size.html. 


@ No projeto css, crle um arquivo chamado font-style*htmI. 


1 

<!DOCTYPE html > 

2 

<html lang="pt-br Jl > 

3 

<head> 

4 

<meta http-equi v="Content-Type a content = l? text/html ; char set = UTF-S J| > 

5 

<title>K19 - font-style</title> 

6 

<link re 1 = " stylesheet ,r type = 11 text / css ,r href-" font-style.css "> 

7 

</head> 

3 

<body> 

3 

<p i d = " p l ■" > 

10 

Loren ipsun dolor sit amet f consectetur adipiscing elit. 

11 

</p> 

12 

<p id-"p2"> 

13 

Loren ipsun dolor sit amet f consectetur adipiscing elit. 

14 

</p> 

15 

<p id="p3 ,r > 

16 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 

17 

</p> 

IS 

</body> 

13 

</html> 


Codigo HTML 3.59: font-style.htmi 


ArtfliiVO: https: //github. cofn/K19/K19-Exercicio5/archive/kG2-css-cofnpIementar66 , zip 


@ No projeto css, crie um arquivo CSS chamado font-style.css. 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

11 


Arquivo: https://github.com/KI9/K19-Exercicio5/archive/kG2-css-complementar67.zip 


@ No Windows, utilize o Chrome para acessar o endereco: 

http: /./localhost/css/public_html/font-style, htntl. 

No Ubuntu, utilize o Chrome para acessar o endereco: 

http://localhost/~<USUARIO>/css/public_html/font-style . html. 


P { 

font-size: xx-large; 

} 

#P1 f 

font-style: italic? 

1 

#P2 { 

font-style: oblique; 

1 


Codigo CSS 3.82: font-style.css- 
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@ No projeto css, crie um arquivo chamado font-variant.html. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 


< ! DOCTTPE h t ml > 

<htrail lang = ,, pt-br ,, > 

<head> 

<meta http-equiv = J| Content-Type" content^" text/html ; charset=UTF-8" > 
<title>K19 - font-variant</title> 

<Iink rel = w stylesheet ' r type = l * text/css J| href=" font - variant. css ' r > 

</head> 

<body> 

<p id="p1 ,r > 

Loren ipsun dolor sit amet, conseetetur adipiscing elit, 

</p> 

<p ld = "p2 , "> 

Loren ipsun dolor sit amet f consectetur adipiscing elit, 

</p> 

</body> 

</html> 


Codigo HTML 3.60: fon t- varian t. h tm t 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar69. zip 


^ No projeto css, crie um arquivo CSS chamado font-vari ant.css. 



ArquiVOl https: //github. com/K19/K19-Exercicio5/archive/k02-css-complementar70 , zip 


G> No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_htrail/font-variant.html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


h ttp: //local host/"-<USUARIO>/css/pub lic_html /font-variant. html. 


© No projeto css, crie um arquivo chamado font-weiglit.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


<!DGCTYPE html> 

<html lang = ,r pt-br''> 

<head> 

<meta http-equiv = J| Content-Type u content=" test/html ; charset = UTF-B J| > 
<title>K19 - font-weight</title> 

<1 ink re l = r? stylesheet " type=" text /css " href=" font -weight . css "> 

</head> 

<body> 

<p id = "p1 JI > 

Loren ipsun dolor sit amet, consectetur adipiscing elit, 

</p> 

<p i d = |J pZ #l > 

Loren ipsun dolor sit amet, consectetur adipiscing elit. 
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14 

15 

16 

17 

18 
1 9 


</p> 

<p id = l 'p3'"> 

Lorem ipsurir dolor sit amet f consectetur adipiscing elit. 
</p> 

</body> 

</html> 


Codigo HTML 3,61: font-weighthtmt 


Arqilivo: https: //github.com/K19/K19-Exercicio5/archive/k02-css-coinplementar72. zip 


© No projeto ess, crie um arquivo CSS chamado font-weight*css. 



Avquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-compleinentar73.zip 


® No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/font-weight.html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


h 1 1 p: / / Lo c a 1 host/~<USUARI0>/css/pub1 i c_h trail / f on t - we i gh t.htm1 . 


© 


No projeto css, crie um arquivo chamado font-face.html 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 


<!DQCT'/PE html> 

< ht m 1 lang=" pt -br' 1 > 

<head> 

<meta http-equiv = ” Content-Type r ' content-" text / html ; charset=UTF-8" > 
<title>K19 - font - face</title> 

<link rel= " stylesheet ’ r type = " text/css dr href= n font-face . css "> 
clink re1=" stylesheet" type=" text /css Jl 

href = '’ http : // fonts . googleapi s . com/css ?f airily =Norican" > 

<link re 1 = ” stylesheet" type=" text /css " 

href = " http : / / fonts , googleapis. com / css? f aoii ly = Bad + Script" > 

<1 ink rel = w stylesheet" type=" text / css " 

href = " http : / / fonts . googleapi s . com/css ? f ami ly =Ceviche + One "> 

</head> 

<body> 

<p id = ” pi Jl > 

lorem ipsum dolor sit amet, consectetur adipiscing elit. 

</p> 

<p id=”p2' r > 
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19 

20 
21 
22 

23 

24 

25 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

</p> 

<p id = "p3" > 

Loren ipsum dolor sit amet, consectetur adipiscing elit, 
</p> 

</body> 

</html> 


Codigo HTML 3.62: fon t-face. h tml 


Arquivo: https://github, com/K197K19-Exercicios/archive/kG2-css-coinplementar75. zip 


® No projeto css, crie um arquivo CSS chamado fon t-face, css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 


m No Windows, utilize o Chrome para acessar o endere^o: 

http://localhost/css/public_html/font-face.html. 

No Ufountu, utilize o Chrome para acessar o endere^o: 

http://localhost/~<USUARIO>/css/public_htiiil/font-face . html. 


P t 

font-size: xx-large; 

} 

#P1 t 

font-family: "Norican"; 

1 

#p2 f 

font-family: "Bad Script 1 11 '; 

#P3 f 

font-family: "Ceviche One"; 

1 


Codigo CSS 3.85: font-face.css 

Arquivo: https://github.com/K197K19-£xercicio5/archive/kG2-css-complementar76 . zip 


No projeto css, crie um arquivo chamado list-style-type,html. 


1 <!DOCTYPE html> 

2 chtml lang="pt -br "> 

3 <head> 

4 <meta http-equi v="Content-Type rJ content- 1 ' text/html ; char set = UTF-B JI > 

5 <title>K19 - list-style-type</title> 

6 <link rel = " style sheet" type=" text /css Jl href = ” list - sty le - type . css ,J > 

7 </head> 

3 <body> 

9 < u 1 i d = " u 1T " > 

10 <li>K0T - Logica de Prograinagao</li> 

11 <1i>K02 - Desenvolvimento Web com HTML r CSS e JavaScri pt </li > 

12 <li>K03 - Modelo Relacional e SQLc/1i> 

13 </ul> 

14 < u 1 i d = " u 1 2 " > 

15 <li>K0T - Logica de Prograinagao</li> 

16 <li>K02 - Desenvolvimento Web com HTML, CSS e JavaScript </ li> 

17 <li>K03 - Modelo Relacional e SQL</li> 
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19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 


</ul> 

< u 1 i d = ,r u 13 " > 

<li>K0T - Logics de Programagao</li> 

< 1 i >K02 - Desenvolvimento Web coin HTML , 
<li>K03 - Modelo Relacional e SQL</li> 
</ul> 

<ol id = ' r oll"> 

<li>K01 - Logics de Programagao</li> 
<li>K02 - Desenvolvimento Web com HTML r 
<1i>K03 - Modelo Relacional e SQL</li> 
</ol> 

<ol id = ,r ol2 ,r > 

<li>K01 - Logics de Programagao</li> 

<1i>K02 - Desenvolvimento Web com HTML, 
<li>K03 - Modelo Relacional e 5QL</li> 
</ol> 

<ol id = ,r ol3"> 

<li>K01 - Logics de Programagao</li> 

<1i>KQ2 - Desenvolvimento Web com HTML, 
<1i>K03 - Modelo Relacional e SQL</li> 
</ol> 

</body> 

</html> 


CSS e JavaScript</1 i> 


CSS e JavaScript</li> 


CSS e JavaScript</1 i> 


CSS e Java5cript</li> 


Codigo HTML 3.63: list-style-type.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar78.zip 


@ No projeto css, crie um arquivo CSS chamado list-style-type, css. 


1 

#ul1 i 

2 

list - style-type : disc; 

3 

1 

4 


5 

#ul2 L 

6 

list-style-type : circle; 

7 

1 

3 


9 

#ul3 i 

10 

list-style-type : square; 

11 

1 

12 


13 

#ol! t 

14 

list-style-type : decimal; 

15 


16 


17 

#ol2 t 

IS 

list-style-type : lower-la tin; 

19 

} 

20 


21 

#ol3 i 

22 

list - style-type : georgian; 

23 

1 


Codigo CSS 3.86: iist-style-type.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar79.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/css/publicjrtml/list-style-type. html* 


No Ubuntu, utilize o Chrome para acessar o endereco: 
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ht tp://localhost/~<USUARI<J>/css/public_htnil /list-style- type .html. 


© 


No projeto css, crie uni arquivo chamado list-style-image,htmL 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 


<!DOCTYPE html > 

< h t m 1 lang = ''pt-br"> 

<head> 

<meta http -equiv=" Content -Type |J content =" text /htjnl ; char set = UTF-S'" > 
<title>K19 - list-style-image</title> 

<link rel = " stylesheet " type =" text/css " href = n list-sty le - image . css J| > 
</head> 

<body> 

<ul id- ,r u11 ,r > 

<li>K0T - Logica de Pro-gra:magao</li> 

<li>K02 - Desenvolvinento Web com HTML, CSS e JavaScript</li> 

<li>K03 - Modelo Relacional e 5QL</li> 

</ul> 

<ul i d = " u 12 ,r > 

<1i>K0T - Logica de Programagao</li> 

<li>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 

<1i>KQ3 - Modelo Relacional e SQL</li> 

</ul> 


<ul id="ul3"> 

<1i>K0T - Logica de Programagao</li> 

<li>K02 - Desenvolvinento Web com HTML, CSS e JavaScript</li> 
<li>K03 - Modelo Relacional e SQL</li> 

</ul> 

</body> 

</html> 


Codigo HTML 3.64: list-style-image.html 


Arquivo: https://github.con/K!9/K19-Exercicios/archive/k02-cs5-conplementar81.zip 


© No projeto css, crie um arquivo CSS chamado list-style-image, css. 


1 

#ul1 i 

2 

list - style - image : url{ "htt-fj : //www. kl 9 . com .br/figs/star, png 11 ) ; 

3 

1 

4 


5 

#ul2 i 

6 

list - style - image : url ( '* http : //www . kl 9 . com .br/figs/cake, png n ) ; 

7 

} 

3 


9 

#ul 3 { 

10 

list- style-image: url( r 'http:/ /www . kl 9 . com .br/figs / flying, heart , png ") 

11 

1 


Codigo CSS3.87: list-style image.css 


Arquivo: https://github.com/KI9/K19-Exercicios/archive/kG2-css-complementar82,zip 


© 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publicjvtml/list-style-image.html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


http: //local host/~<USUARIO>/css/public_htf!il/li st-style-image, html. 
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© No projeto css, crie urn arquivo chamado list-style-positiomhtmL 


1 <!DOCTYPE html> 

2 <htm 1 lang = '' pt -br" 1 2 3 4 5 6 7 > 

3 <head> 

4 <meta http-equiv = JI Content-Type N content- 1 ' text/html ; charset=UTF-8" > 

5 <title>K19 - list-style-position</title> 

6 <link re 1 = " stylesheet ,r type=” text/css href = " list -sty le - posit ion . css r '> 

7 </head> 

3 <body> 

3 <ul id= ir ull"> 

10 <li>K01 - Logica de Programagao</li> 

11 <li>K02 - Desenvol vimento Web coin HTML r CSS e JavaScri pt </li> 

12 <li>K03 - Modelo Relacional e SQL</li> 

13 </ul> 

14 <ul id = Jr ul2 JI > 

15 <li>K0T - Logica de Programagaoc/li> 

16 <li>K02 - Desenvolvimento Web com HTML r CSS e JavaScript</li> 

17 <li>KQ3 - Modelo Relacional e 5QL</li> 

18 </ul> 

13 </body> 

20 </html> 


CodigoHTML 3 . 65 ; tist-style-posirion.html 


Arqiiivo: https: //github.com/KI9/K13-Exercicios/archive/k02-css-complementar84. zip 


@ No projeto css, crie um arquivo CSS chamado list-style-position,css. 


1 

2 

3 

4 

5 

6 
7 


Arquivo: https://github.com/KI9/K13-Exercicio5/archive/k02-css-complementar85 , zip 


li t 

borders 1 px solid black; 

} 

# u 11 i 

list-style-pos i tion : inside; 

} 


Codigo CSS3.88: tist-style-position.ess 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publicjitml/list-style-position . html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http: //localhost/~<USUARIO>/css/public_html/list-style-position.html. 


© 


No projeto css, crie um arquivo chamado border-style,html. 


1 <!DOCTYPE html> 

2 <html lang = "pt-br' 1 > 

3 <head> 

4 <meta http-equiv = ,r Content-Type" content^" text/html ; charset = UTF -S " > 

5 <title>K19 - border - stylec/1itle> 

6 clink rel= rJ stylesheet Jl type = p text /css " href =ni border - style . css Jl > 

7 </head> 

3 <body> 

3 cdiv id = r 'div1 ,r x/div> 
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10 

11 

12 

13 

14 


<div id-" div2■" ></div> 
<div id="'div3 ,l ></div> 
<div id=" div4 Jl ></ div> 
</body> 

</html> 


Coctigo HTML 3.66: herder-style.html 


Arquivo: https://github, com/K197K19-ExercLeios/archive/k02-css-complemenlar37, zip 


© No projeto css, crie um arquivo CSS chamado border-style.css. 


1 

div { 

2 

width: 4Q0px; 

3 

height : 200px; 

4 

margin: lOpx; 

5 

border-width: 6px; 

6 

1 

7 


3 

#div1 { 

9 

border-style: dotted; 

10 

} 

11 


12 

#div2 { 

13 

border-style: dashed; 

14 

1 

15 


16 

#div3 { 

17 

border-style: solid; 

IS 

1 

19 


20 

#div4 { 

21 

border-style: double; 

22 

1 


Cddigo CSS 3,89: border-style,css 


Aiquiuo: https://github.com/KI97K19-Exercicios/archive/k02-css-coinplementar88 . zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://loca1host/css/public _ht ml/bo r d e r-s t y1e.html . 


No Ilfountu, utilize o Chrome para acessar o endereco: 


http://loca1host/-<USUAR10>/css/pub1ic_h tml/bo rde r-s ty1e.htmL 


No projeto css, crie um arquivo chamado border-width.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 


<!DOCTYPE html> 

<html lang = ' r pt-br "> 

<head> 

<meta http-equiv=" Content-Type" content-” text/html ; charset=UTF-8 J| > 
<title>K19 - border-width</title> 

<link rel= ” stylesheet" type=” text/css " href=" border -width . css Hl > 
</head> 

<body> 

<div id=" divl "></div> 

<div id=" div2 ,r x/div> 

<div id= "div3" ></ div> 

<div id="div4 M x/div> 
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13 

14 


</body> 
</html> 


Codigo HTML 3.67: border-width.hunt 


Arquivo: https: //github. com/KIS/KI9-Exercicios/archive/k02-css-compleifientar90. zip 


No projeto css, crie um arquivo CSS chamado border-width.css. 


1 

div i 

2 

width: 4Q0px; 

3 

height : 200px; 

4 

margin: 10px; 

5 

border-style: solid; 

6 

1 

7 


3 

ttdivl { 

9 

border-width: thin; 

10 

} 

11 


12 

#div2 { 

13 

border-width: thick; 

14 

1 

15 


16 

#div3 { 

17 

border-width: 2px; 

18 


19 


20 

#div4 { 

21 

border-width: 10px; 

22 

1 


Codigo CSS3.90: borrier-width.css 


Arquivo : https://github.com/K!9/Kl9-Exercicio5/archive/k02-css-complementar91, zip 


No Windows, utilize o Chrome para acessar o enderego: 


http://loca1host/css/public_htrail/border-width.html. 


No Ubuiitu, utilize o Chrome para acessar o enderego: 


h 1 1 p://loca1 host / ™< U5U AR I0> / c ss / pub 1ic_h t ml/bo rde r- width, html. 


@ No projeto ess, crie um arquivo chamado border-color.html 


1 < ! DOCTTPE html > 

2 <htm 1 lang = ' r pt-br" > 

3 <head> 

4 <meta http-equiv = J| Content-Type" content= "text/html ; charset=UTF-8" > 

5 <title>K19 - border-color</title> 

6 <1 ink rel = " stylesheet 111 type=" text /css ” href= " border -color , css" > 

7 </head> 

3 <body> 

9 <div id^™ divl "x/div> 

10 <div id = " div2 '■ ></ div> 

11 <div id=" div3" ></div> 

12 </body> 

13 </html> 


Codigo HTML 3.68: border-color, h tmi 
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Ai'CfUiVO: https://github.com/K19/Kl 9-Exercicio5/archive/k02-css-complementar93 , zip 


No projeto css, crie um arquivo CSS chamado border-color,css. 


1 

div { 

2 

width: 40Opx; 

3 

height : 2 00 px; 

4 

border-style : solid; 

5 

1 

6 


7 

#div1 { 

3 

border-color: red; 

9 


10 


11 

#div2 { 

12 

border-color: #00ff00; 

13 

} 

14 


15 

#div3 { 

16 

border-color: rgb(0, 0 f 255); 

17 

} 


Codigo CSS 3.91: border-color.css 


Arqitiuo: https://github. cghi/K 19/K19-Exercicios/archive/k02-css-coinplementar94. zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http: //loca1host/css/public_html/border-color. html. 

No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost ! ~<U5U ARI0>/css/pub1ic_h t ml/borde r-color.html, 


@ No projeto css, crie um arquivo chamado hordas-individuals,html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 


<!DOCTVPE html> 

<html lang = ' r pt -br' 1 > 

<head> 

<meta http-equiv=" Content-Type p content = |J text/html; charset = UTF -B J| > 
<title>K19 - bordas-irtdividuais</title> 

<link re 1 = " stylesheet " type = l# text /css J| href = " bordas - irrdi vidua i s . css J| > 
</head> 

<body> 

<div></div> 

</body> 

</html > 


Codigo HTML 3.69 ; bordas-indwidimis.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar96,zip 


m No projeto css, crie um arquivo CSS chamado bordas-individuals, css. 


div { 

width: 400px; 
height: 200 px; 
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5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 


border-top-style: dashed; 
border-top-color: red; 
border-top-width: 2px; 

border-right-style: dotted; 
border-right-color: SOOffOO; 
border-right-width: Bpx; 

border-bottom - style: double; 
border-bottom-color: rgb(0 r 0, 255); 
border-bottom-width: 14px; 

border-left - style: solid; 
border-left-color: black; 
border-left-width: 20px; 


Codigo CSS 3.92: hordas-individuais.css 


Arquiuo: https://github.com/K19-Exercicios/archive/k02-css-complef!ientar97. zip 


m No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publicjhtml/bordas-individuals , html. 


No Ufountu, utilize o Chrome para acessar o endere^o: 


http://loca1host/~<USUARIQ>/css/publicjitml/bordas-individuais.html. 


@ No projeto css, crie um arquivo chamado border-radius.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 


<!DOCTYPE html> 

<html lang=" pt - br' 1 > 

<head> 

<meta http-equiv = ! " Content-Type" content^" text/html ; charset = UTF -8" > 
<title>K19 - border-radius</title> 

<1 ink rel = " stylesheet Jr typ-e= ” text/css Jl href = " border - radius . css "> 

</ head> 

<body> 

<div id=" di vT H ></div> 

<div id= rt div2 "></div> 

<div id=" div3 M x/div> 

<div id= n div4'' ></div> 

</body> 

</html> 


Codigo HTML 3 . 70: border-radius, h tml 


Arquiuo: https;//github.com/K13/K19-Exercicios/archive/k02-css-complementar93.zip 


No projeto css, crie um arquivo CSS chamado border-radiusxss. 


1 

2 

3 

4 

5 

6 
7 
3 
9 


div { 

width: 4Q0px; 

height : 100px; 

margin: lOpx; 

border: 2px solid black; 

#div1 { 

border-radius: 20px; 
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CSS 


ID 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 


> 

#div2 { 

border-radius: 20px 60px; 

} 

#div3 { 

border-radius: 20px 60px lOOpx; 

1 

#div4 { 

border-radius: 20px 60px lOOpx 140px; 

1 


Codigo CSS 3.93: border-radius ,css 

Arquivo: nttps: //github. coti/K19/K1 9-Exercicio5/archive/k02-css-cc*nplementar1 00 . zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publie_html/border-radius.html. 


No Ufouiitu, utilize o Chrome para acessar o endere^o: 


http: //loca1host/~<USUARIO>/css/public_htffll/border- radius.html. 


® No pro] e to css, crie um arquivo chamado border-collapse, html. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 


<! DOCTYPE html > 

<html lang = "pt-br' 1 > 

<head> 

<meta http -equiv = '' Content-Type r ' content-" text/html ; charset-UTF -S " > 
<title>K19 - border-collapsec/title> 

< 1 i nk rel = r# stylesheet '' type— ''text /css'' href- 1 ' border - collapse . css '*> 
</head> 

<body> 

<table id=" tabelal "> 

<tr> 

<td>K19 </td> 

<td>K19</td> 

< /1 r > 

<tr> 

<td>K19</td> 

<td>K19</td> 

</tr> 

</table> 

<table id=" tabela2 "> 

<tr> 

<td>K19</td> 

<td>K19</td> 

< /1 r > 

<tr> 

<td>K19</td> 

<td>K1 9 </ td> 

</tr> 

</ table> 

</body> 

</html> 


Codigo HTML 3.71 ; border-collapse, html 


Arquivo: https://github,com/K19 i /K19-Exercicios/archive/k02-css-complementar102.zip 
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® No projeto css, crie urn arquivo CSS chamado border-collapsexss. 


1 

table { 

2 

border: 2px solid black; 

3 

margin: 10px; 

4 

1 

5 


6 

td i 

7 

border: 2px solid black; 

3 

1 

9 


10 

fttabelal i 

11 

border-collapse: collapse; 

12 

1 


Codigo CSS 3.94: bolder- collapse, css 


Arquivo: https ://github.com/K13/K19-Exercicios/archive/kG2-css-coiriplementar103 . zip 


No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/css/public_html/border-collapse,html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http: //localhost/”<USUARIO>/css/public_htnil/border-collapse.html. 


{0) No projeto css, crie um arquivo chamado border-spacingditml 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 


<!DGCTYPE html > 

<html lang = J| 'pt-br'"> 

<head> 

<meta http-equiv = J| Content-Type ” content^ test/htjnl ; charset = UTF-8 J| > 
<title>K19 - border-spacing</1itle> 

<1 ink rel = " stylesheet ” type = H text /css " h re f= ,H border -spacing, css" > 
</head> 

<body> 

<table id=” tabelal "> 

<tr> 

<td>K19 </td> 

<td>Kl9</td> 

</tr> 

<tr> 

<td>K19</td> 

<td>K19</td> 

< /1 r > 

</table> 

<table id=" tabela2 "> 

<tr> 

<td>K19 </td> 

<td>K19 </td> 

</tr> 

<tr> 

<td>K19</td> 

<td>K19</td> 

</tr> 

</table> 

</body> 

</html> 


Codigo HTML 3 . 72 ; border-spacing, him! 
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Al'CJUiVO: https://github.com/K19/K19-Exercici0s/archive/kO2-css-complementarl05,zip 


No projeto css, crie um arquivo CSS chamado border-spacing,css. 


1 

table { 

2 

border: 2px solid black; 

3 

margin: lOpx; 

4 

} 

5 


6 

td { 

7 

border: 2px solid black; 

3 

1 

9 


10 

fttabelal i 

11 

border-spacing: lOpx 5px; 

12 

} 


Cddigo CSS 3.95 : border-spacing.css 


Arquivo: https://github.cam/K19/K19-Exercicios/archive/kQ2-css-compIementar106.zip 


No Windows, utilize o Chrome para acessar o endere^o: 


h 11 p://loca1 host / css /pu bl i c_ht ml/bo r d e r- spac i ng . h tml. 


No Ufountu, utilize o Chrome para acessar o endereco: 


http://loca1host /~<USUARIO>/css/public_html/border-spacing.html. 


No projeto css, crie um arquivo chamado outUne-style.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


<!DGCTYPE html> 

< lit ml lang = jr pt -br ,r > 

<head> 

<meta http-equiv- JI Content-Type" content = " text/html ; charset=UTF-8 JI > 
<title>K19 - outline-style</title> 

<1 ink rel = w stylesheet " type=" text/css " href= " out line-sty le . css "> 
</head> 

<body> 

<div id = |J divl "></ div> 

<div id=" div2 "></div> 

<div id=" div3 ' r ></div> 

</body> 

</html> 


Codigo HTML 3.73: outline-style.htmi 


Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-css-compIementar108. zip 


^ No projeto css, crie um arquivo CSS chamado outline-style.css. 


1 

2 

3 

4 

5 

6 
7 


div { 

width: 400px; 
height: 100 px; 
margin: lOpx; 

1 

ttdivl { 
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8 outline-style: dashed; 

9 1 
10 

11 #div2 { 

12 outline-style: dotted; 

13 } 

14 

15 #div3 { 

16 outline-style: solid; 

17 } 


Codigo CSS 3.96: outline-styte.css 


Arcflliuo: rttps://github.con/K ' 3/K19-zxe^cicios/archive/k02-css-complementary09 , zip 


No Windows., utilize o Chrome para acessar o endere^o: 


h 11p: / /lo ca 1 host/css/pub 1 ic_ht ml /on 11 i ne- s t y le . h tml . 


No UbuntUp utilize o Chrome para acessar o endere^o: 


http://localhost/~<U5UARI0>/css/public_html/outline-style.html. 


m No projeto css, crie urn arquivo chamado outline-color.htmi. 


1 <!DOCTVPE html > 

2 <html lang = ,r pt-br"> 

3 <head> 

4 <meta http-equiv = J| Content-Type H content= " text/html ; charset=UTF -B" > 

5 <title>K19 - outline-color</title> 

6 <link rel = " stylesheet ,r type = " text/css 11 href=" out line -color . css N > 

7 </head> 

8 <body> 

9 <div id-" divl" ></div> 

10 <div id^'" div2 " ></div> 

11 <div id=” div3 " ></ div> 

12 </body> 

13 </html> 


Codigo HTML 3.74: outline-color.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar111.zip 


No projeto css, crie um arquivo CSS chamado outline-color.css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 


div { 

width: 400px; 
height : 1 GOpx; 
margin: lOpx; 
outl ine -style: solid; 

1 

#div1 { 

outl ine -color: red; 

} 

#div2 { 

outl ine -color: #00ff00; 

1 

#div3 { 
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17 

18 


outline-color : rgb{0, 0, 255); 

} 


Codigo CSS 3.97: outime-color.css 


ArCJlliVO: rittps: //github.com/K19/K19-Exercicios/archive/k02-css-complementarl 1 2 . zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/outline-color.html. 


No Ufountu, utilize o Chrome para acessar o endere^o: 


http: /./loca 1 host / ~< USU AR I0> / c ss/pub lic_htrol./out line-color.html. 




No projeto css, crie um arquivo chain ado outline-width.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


<!DGCTYPE html> 

<htral lang="pt-br' r > 

<head> 

<meta http-equiv=" Content-Type p content=" test/tit ml ; char set = UTF -8 J| > 
<title>K19 - outline-widtbc/title> 

<link rel= IJ stylesheet ,r type = u text /css J| href= " out line-width . css "> 

</head> 

<body> 

<div id="div1 "></div> 

<div id=" div2" ></div> 

<div id-" div3 ''x/div> 

</body> 

</html> 


Codigo HTML 3.75 ; outlme-widtkhtml 


Arquivo: https://github , com/KI9/K19-Exercicios/archive/k02-css-complementarl14,zip 


^ No projeto css, crie um arquivo CSS chamado outline-width. css. 


1 

div t 

2 

width: 400px; 

3 

height: 100 px; 

4 

margin: 20px; 

5 

outline-style: solid; 

6 

1 

7 


3 

#div1 { 

9 

outline-width: thin; 

10 

} 

11 


12 

#div2 { 

13 

outline-width: thick; 

14 

} 

15 


16 

#div3 { 

17 

outline-width: 2px; 

18 

} 


Codigo CSS3.98: outline-width.css 


Arquivo : https://github.com/K19/K19-Exercicios/archive/k02-css-cofipleinentar115. zip 
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^ No Windows, utilize o Chrome para acessar o endere^o: 


h 11 p://loca1host/css/pu blic_btrail /ou 11 i ne- w i d t h. h tml , 

No Ubuntu, utilize o Chrome para acessar o enderego: 


http://loca1host/™<USUARIQ>/css/publicjitml/outline-width.html. 


m No projeto css, crie um arquivo chamado outline-offset.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


<!DOCTYPE html> 

< ht m 1 lang = " pt-br' 1 > 

<head> 

<meta http-equiv=" Content-Type" content-" text/html ; charset =UTF-B" > 
<title>K19 - outline-offset</title> 

clink re 1 = 11 stylesheet <r type-" text /css' r href= n outline-offset . css “> 

</ head> 

<bcdy> 

cdiv id = r 'div1 ''x/div> 

<div id = ” div2" ></div> 
cdiv id = " div3 " ></ div> 
c/body> 
c/html> 


Codigo HTML 3.76: outline-offset.hmit 


Arquivo: https://github.can/K19/K19-Exercicios/archive/k02-css-complementar117.zip 


No projeto css, crie uni arquivo CSS chamado outline-offset,css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 


div { 

width: 400px; 

height : 5Qpx; 

margin: 50px; 

outline: 5px solid red; 

border: 5px solid black; 

1 

#div1 { 

outline-offset: 20px; 

} 

#div2 { 

outline-offset: -2Gpx; 

} 


Codigo CSS 3.99: outline-offset css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/kG2-css-complementar118. zip 


® No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public Jitml/outline-offset.html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


http: //localhost/~<USUARIO>/css/public_html/outline-offset.html. 
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@ No projeto css, crie urn arquivo chamado box-shadow.html. 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

11 

12 

13 

14 


<!DOCTYPE html> 

<h trail lang = ' 1 pt-br'‘> 

<head> 

<meta http-equiv = ' r Content-Type" content-" text/html ; charset=UTF-8" > 
<title>K19 - box-shadows/titie> 

<link rel = " stylesheet 11 type=" text/css Jr href= n box -shadow . css" > 

</head> 

<body> 

<div id= "div T " ></div> 

<div id=" div2 "></div> 

<div id = |J div3" ></ div> 

<div id = |J div4 Jl ></ div> 

</body> 

</html> 


Codigo HTML 3.77: box-shadow.htmi 


Arquivo: https://github.com/K19/K13-Exercicios/archive/k02-css-complementarl20 . zip 


No projeto css, crie um arquivo CSS chamado box-shadow.css. 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

11 

12 

13 

14 

15 

16 
17 
13 
13 
20 
21 
22 


div { 

width: 2Q0px; 
height : 100px; 
border: 4px solid black; 
margin: 50px; 

} 


ftdivl { 

box-shadow : lOpx 5px gray; 

#div2 { 

box-shadow : lOpx 5px Spx gray; 

1 

#div3 { 

box-shadow : inset. lOpx lOpx gray; 

1 


#div4 { 

box-shadow : inset IQpx lOpx 5px gray; 

1 


Codigo CSS 3A00: box-shcdow.css 


Arquivo: https://github.com/K19/K1 3-Exercicios/archive/k02-css-coinplementar121 . zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http:// loca 1 host/css/public_h trail/box-shadow.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/css/public_htral/box-shadow.html. 


No projeto css, crie um arquivo chamado margens-externas.html. 
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1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 

14 


< ! DOCTVPE htinl > 

<html lang = ' r pt-br"> 

<head> 

<meta http-equiv= "Content - Type" content=" text/html ; charset = UTF-B" > 
<title>K19 - margens-externas</1 i tle> 

<Iink rel = "stylesheet" type = r ’ text/css " href = "margens-externas . css " > 
</head> 

<body> 

<div id=" divl '"x/div> 

<div id-" div2 "x/div> 

<div id=" div3 ,r x/div> 

<div id=" div4 "></ div> 

</body> 

</html> 


Codigo HTML 3.78: margens-extermis.html 


A Li 7 U i VO ; - 11 p s: / / git ■•UP. c c t / K' 3 / K 19-z x e ■' cicios / a r c hive/k02-css-complement arl 23. zip 


@ No projeto css, crie um arquivo CSS chamado mar gens-externas.css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 


div { 

display: inli ne-block ; 
border: 1 px solid black; 
width: lOOpx; 
height: lOOpx; 

} 

#div1 { 

margin-top: 50 px; 
margin-right: 50 px; 

} 

#div2 { 

margin-bottom: 50 px; 

} 

#div3 £ 

margin-left: 50 px; 

1 

#div4 £ 

margin-left: 50 px; 
margin-bottom: 50 px; 

1 


Codigo CSS 3.101: margens-extemas.css 


Arquivo: https: //github. com/KIO/KI 9 -Exercicios/archive/k 02 -css-ccnnplementar 124 , zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/publicjvtml/margens-externas . html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //loca 1 host/~<USUARIG>/css/public_html/margens-externas.html. 


© No projeto css, crie um arquivo chamado margens-internas.html. 


1 <!DOCTfPE html> 
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2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 


<html lang = "pt -br' 1 > 

<head> 

<meta http-equiv = "' Content-Type p content=" test / tit ml . ; char set = UTF-B J| > 
<title>K19 - margens-internasC/title> 

<1 ink rel = IJ stylesheet" type=" text/css" href= '" marge ns - internas . css" > 
</ head> 

<body> 

<div id = " divl ></ d iv> 

<div id=" div2" ></d£v> 

<div id = " div3 ></div> 

<div id.-'" div4 ></div> 

</body> 

</html> 


Codigo HTML 3.79: margens-internas.htmt 


Arquivo: https://github, com/K!S/K19-£xercicio5/archive/k02-css-complementarl26 . zip 


^ No projeto css, crie urn arquivo CSS chamado mar gens- intern as, css. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 


div { 

display: inli ne-block ; 
border: 2px solid black; 
width: lOOpx; 
height: 1 DO px; 
background-color : yellow; 
background-clip: content-box; 

} 

# d i v 1 { 

padding-top: 50px; 
padding - right: 50px; 

} 

#div2 { 

padding-bottom: 50px; 

} 

#div3 { 

padding-left: 50px; 

#div4 { 

padding -left : 50px; 
padding-bottom: 50px; 

} 


Codigo CSS 3.102: margens-internas.css 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-coinplementar127. zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 

http://localhost/css/public_html/margens-internas.html. 

No Ubiintu, utilize o Chrome para acessar o endere^o: 

h 11 p://loca1host ! ™<USUARIO>/c ss/pub1ic_h tml/ma rge n s-1n t ernas . html . 


® No projeto css, crie um arquivo chamado conteutfo-dimensao.html. 
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1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 


<!DQCTYPE html> 

<html lang = ' r pt-br' r > 

<head> 

<meta http-equiv = JI Content-Type" content = " text/html ; char set = UTF-£ J| > 
<title>K19 - conteudo-dimensao</title> 

<link rel = M stylesheet ■" type= r ' text / css " href= " conteudo-dimensao . css "> 
</head> 

<body> 

<p id="p1 ,r > 

Loren ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et temper sollicitudin , orci lorem iaculis sem, 
sit amet sodales quam nassa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

<p id="p2"> 

Loren ipsun dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et temper sollicitudin, orci lorem iaculis sem, 
sit amet sodales quan massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

<p id="p3"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In 
mollis, nibh et temper sollicitudin, orci lorem iaculis sem, 
sit amet sodales quan massa sit amet risus. Fusee malesuada 
eleifend massa, ac mollis mi fermentum vitae. Nullam consequat 
leo nunc, in ornare turpis aliquam quis. 

</p> 

</body> 

</html> 


Codigo HTML 3.80: contEudo-dimensao.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-css-complementar129 . zip 


® No projeto css, crie um arquivo CSS chamado conteudo-dimensaoxss. 


1 

P t 

2 

border: 1px solid black; 

3 

max-height: 2Q0px; 

4 

max-width: 400px; 

5 

1 

6 


7 

#P1 t 

3 

width: 200px; 

9 

1 

10 


11 

#p2 { 

12 

height : 1 30px; 

13 

1 


Codigo CSS 3J03: co n te udo dim ensao. css 


Ai'quiuo: https://github.com/K19/Kl 9-Exercicios/archive/k02-css-complementar130. zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/css/public_html/conteudo-dimensao.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 
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h t tp: //loca 1 host / ~< USU AR IO> /css /pub 1 i c_h t nil / co n te u d o- d i mens ao . h tml . 



Resumo do Capitulo 


A linguagem CSS e utilizada para formatar visualmente as paginas web. 
► Podemos considerar cada elemento HTML como um box. 

A estrutura dos boxes e defimda pelo Box Model. 


► De aeordo com o Box Model cada box possnl conteudo margens in tenia s, bordas e mar gens 


extern as. 


Por padrao, os boxes dos block-level elements ocupam todo o espaco horizontal do elemento 
pai e provocam quebras de linha. 


► Por padrao, os boxes dos inline-level elements ocupam apenas o espaco necessario e nao 
provocam quebras de linha. 


► 


A formatagao dos elementos HTML e definida atraves das regras CSS 


Uma regra CSS e composta por seletor e eorpo. No corpo, sao definidas as propriedades CSS. 


Os seletores definem quais elementos HTML serao afetados pelas regras CSS. 


As propriedades CSS definem as caract eristic as visuais dos elementos HTML. 


As regras CSS podem ser aplicadas aos documentos HTML de tres formas diferentes: inline 
style, internal style sheet e external style sheet. 


Os comentarios CSS sao definidos com os marcadores /* e */. 


Na linguagem CSS, toda cor esta associada a um codigo numerico expresso em hexadecimal. 
Algumas cores possuem nome. 
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Podemos escolher uma cor atraves do codigo dela ou atraves das fundoes rgbQ, rgbaf), hsl() e 
hslaf}. As cores que possuem nome podem ser escoUiidas atraves do seu notne. 




As unidades absolutas da linguagem CSS sao: cm, mm, in, pt, pc e px. 


As unidades relativas da linguagem CSS sao: em, ex, ch, rein, vw, vh, vmin e vmax 


Asprincipais propriedades de background sao: background-color, background-image, background- 
repeat, background-attachment, background-position, background-clip, background-origin, background- 
size e background. 


As principals propriedades de texto sao: color, text-align, text-deco ration, text-transform, 
text-indent, letter-spacing, word-spacing, word-wrap, line-height, white-space e text-shadown. 


As principals propriedades de fonte sao: font-family, font-size, font-style, font-variant, font- 
weight, font e @font-face. 


As principals propriedades de lista sao: list-style-type, list-style-image, list-style-position e 
list-style. 


As print ip ais propriedades de borda sao: border-style, border-width, border-color, border, 
border-left-*, border-top-*, border-right-*, border-bottom-*, border-radius, border-*-*-radius, border- 
collapse e border-spacing. 


Asprincipais propriedades de outline sao: outline-style, outline-color, outline-width, outline- 
offset e outline. 


A principal propriedade de sombra e box-shadow. 




As principals propriedades de margens sao: margin-*, margin, padding-* e padding. 


As principals propriedades de altura e largura sao: height, width, min-height, max-height, 
min-width e max-width, 


A propriedade display define a forma de exibi^ao dos boxes. 




A propriedade display define a forma de exibi^ao dos boxes. 
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Apropriedade visibility define a visibilidade dos boxes. 


Podemos controlar a opacidade dos boxes com a propriedade opacity. 


Os qnatro tipos de posicionamento do CSS sao: static, relative, fixed e absolute. 


As principals propriedades de posicionamento sao: position, float, clear e z-index. 


As principals propriedades de overflow e clips sao: overflow, overflow-x, overflow-y e clip. 


As principals funcoes de transformagao sao: translateQ, scaled, rotated e skew(). 


As principals propriedades de transigaosao: transition-duration, transit ion-delay, transition- 
timing-function e transition-property. 


As principals propriedades de animagao sao: animation-timing-function, animation-delay, 
animation-iteration-count, animation-direction e animation-play-state. 


Po demos dividir os seletores do CSS em basicos, seletores de atributo, pseudo-classes e pseudo- 
elementos. 


& Quando ocorre conflito entre duas ou mais regras CSS, devemos calendar a prioridade dos 
seletores dessas regras para saber qual delas sera aplicada. 


Com as media queries po demos definir formatagoes especificas para os divers os tipos dedis- 
posltivos que desejamos sup or tar. 


Atecnica sprites melhora o tempo de carregamento das paginas web. 


O Prova 


| Co ns id ere a formatagao padrao dos navegadores. O que podemos dlzer sob re um block-level 
element? 


a) Ocupa metade do espago horizontal e nao provoca quebras de linha. 

b) Ocupa horizontalmente somente o espago necessario para o seu conteudo e nao provocam 
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quebras de linha. 

c) Ocupa todo o espago vertical e provoca quebras de linha. 

d) Ocupa horizontalmente sornente o espago necessario para o sen conteudo e provocam que¬ 
bras de linha. 

e) Ocupa todo o espago horizontal e provoca quebras de linha. 


| Considere a formatagao padrao dos navegadores. O que podemos dizer sobre um inline-level 
element? 


a) Ocupa metade do espago horizontal e nao provoca quebras de linha. 

b) Ocupa horizontalmente somente o espago necessario para o seu conteudo e nao provocam 
quebras de linha. 

c) Ocupa todo o espago vertical e provoca quebras de linha. 

d) Ocupa horizontalmente somente o espago necessario para o seu conteudo e provocam que¬ 
bras de linha. 

e) Ocupa todo o espago horizontal e provoca quebras de linha. 


| Como podemos aplicar um codigo CSS a um documento HTML? 


a) Atraves do elemento link da seguinte forma: 


1 I <1 ink r-el = !J s ty leshee t" type = !J text / css" src = " sstilo. css ''></ link >. 


b) Atraves do elemento css da seguinte forma: 


1 <css>p -[font-size: 12px}</css> 


c) Atraves do elemento style da seguinte forma: 


1 <style rel = " stylesheet |J type = " text/ css ,J src- |J estilo . css J| ></style> 


d) Atraves do elemento link da seguinte forma: 


1 <link rel = " stylesheet" type—" text/css" href“" estilo. css ,r ></llnk> 


e) Atraves do elemento stylesheet da seguinte forma: 


1 <stylesheet src= "estilo.css "></stylesheet> 


| Qual das alternativas e um valor invalido de cor CSS? 
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a) red 

b) #OOffOO 

c) preto 

d) rgba(0, 100, 30, 0,1) 

e) hsIf lOOp 20%, 10%) 

| Qual das alternativas e uma nrtidade invalida de medida CSS? 

a) px 

b) em 

c) rem 

d) qm 

e) pc 

Q Qual das propriedades abaixo pode ser utilizada para definir uma imagem de fundo de um 
element o? 

a) background-attachment 

b) background 

c) bg color 

d) background-size 

e) bg-image 

| Para definirmos a cor da fonte de um texto, qual propriedade CSS devemos utilizar? 

a) color 

b) font-color 

c) text-color 

d) foreground-color 

e) colour 

| Considere o seguinte codigo HTML: 
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1 

2 

3 

4 

5 

6 


<div>Lorem ipsunt dolor sit amet f consectetur adipiscing elit. 

Cras vehicula bibendum arcu. 

Sed dui nulla t cursus @t lacinia eu, 

vulputate ac dolor. 

Quisque faucibus congue congue ..</div> 


O que acontecera quando esse codigo for renderizado em um navegador? 


a) Todas as sequencias de espaqos serao tratadas como um unico espaco e as quebras de linlia 
serao respeitadas. 

b) Todas as sequencias de espaqos serao respeitadas e as quebras de linha serao ignoradas. 

c) Todas as sequencias de espacos serao respeitadas e as quebras de linha serao tratadas como 
um espaco. 

d) Todas as sequencias de espaqos serao tratadas como um unico espaco e as quebras de linha 
serao ignoradas, 

e) Todas as sequencias de espaqos serao tratadas como um unico espaqo e as quebras de linha 
serao tratadas como um espago. 


Q Para alterar o comportamenlo padrao com relagao ao tratamento dos espacos e quebras de linha, 
devemos utilizar qual propriedade CSS? 

a) white-space 

b) word-spacing 

c) w T ord-wrap 

d) line-height 

e) white-spacing 


| Podemos alterar a fonte de um texto atraves da propriedade CSS font-family. Quais valores 
podem ser atribuidos a essa propriedade? 

a) O nome de uma fonte. 

b) O nome de um grupo de fonte classificado pela espessura das fontes, 

c) O nome de uma familia de fonte. 

d) O nome de uma fonte ouo nome de uma familia de fonte. 

e) O nome de um grupo de fonte classificado pelo tamanho das fontes. 
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] Considere um elemento com as seguintes propriedades CSS: 


1 

width: 

1OOpx; 

2 

border: 

10px solid black; 

3 

margin : 

1 Opx; 

4 

padding 

: 1 0 px ; 


Ao ser renderizado eni um navegador, o elemento ter a: 


a) 120px de largura. 

b) 120px de altura. 

c) 13Opx de largura. 

d) 140px de altura. 

e) 16Gpx de largura. 


Q Qual a diferenga entre uma '‘borda” produzida pela propriedade outline e outra produzida pela 
propriedade border? 


a) N e nhum a dife re ng a, 

b) A borda produzida pela propriedade border e mais grossa. 

e) A borda produzida pela propriedade outline nao pode ter sua cor aiterada. 

d) A borda produzida pela propriedade outline nao afeta as dimensoes do box do elemento. 

e) A borda produzida pela propriedade border nao funciona em todos os navegadores. 


| Podemos utilizar a propriedade display com valor none ou a propriedade visibility com valor 
hidden para fazer com que um elemento nao apareca em uma pagina HTML. Qual a diferen<^a entre 
as duas abordagens? 


a) Nenhuma diferenga, 

b) O espaco do box de um elemento com propriedade display igual a none permanece inalterado. 
e) O espago do box de um elemento com propriedade visibility igual a hidden deixa de existir, 

d) O espaco do box de um elemento com propriedade display igual a none deixa de existir. 

e) Se o valor none for atribuido a propriedade display, ela nao podera mudar mais de valor. 


] Considere um elemento com as seguintes propriedades CSS: 
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1 position; absolute; 

2 top: Opx; 

3 left : Opx; 


O que podemos dizer sobre esse elemento? 


a) Sera posicionado a Opx do topo e Opx da esquerda da pagina. 

b) Sera posicionado a Opx do topo e Opx da esquerda do elemento paL 

c) Sera posicionado a Opx do topo e Opx da esquerda do primeiro elemento ancestral. 

d) Sera posicionado a Opx do topo e Opx da esquerda do primeiro elemento ancestral que tenha a 

propriedade position diferente de static. 

e) Sera posicionado a Opx do topo e Opx da esquerda do primeiro elemento ancestral que tenha 
a propriedade position diferente de static. Caso nenhum ancestral se encaixe nessa condi^ao, 
ele sera posicionado a Opx do topo e Opx da esquerda da pagina. 


] Considere o seguinte codigo: 


1 <div style = ' r width : 50 px; height; 5 Opx; font-size: 16px; 

2 overflow; hidden; border: 1 px solid red JI > 

3 Loren ipsum dolor sit annet r consectetur adipiscing elit. Sed eget arcu neque. 

4 Cras at varius libero, vitae varius mauris. Nullam posuere eget nisi at 

5 posuere, Cras eu laoreet ipsum. 

6 </div> 


O que podemos dizer sobre o conteudo do elemento div? 


a) O trecho do conteudo que ultrapassar na vertical e na horizontal os limites do elemento div 
sera exibido. 

b) O trecho do conteudo que ultrapassar na vertical os limites do elemento div sera exibido. 

c) O trecho do conteudo que ultrapassar na vertical e na horizontal os limites do elemento div 
nao sera exibido. 

d) O trecho do conteudo que ultrapassar na horizontal os limites do elemento div sera exibido. 


Q Considere o seguinte codigo: 


1 

2 

3 

4 

5 

6 

7 

8 
3 

10 


<div id = l;, div1 " class = J| class 1 "> 

<p id-" pi ">Lorem ipsum dolor sit amet,</p> 

<p id-"p2" class= "class! ">Loren ipsun dolor sit amet.</p> 

<div id=”div2" > 

Loren ipsun dolor sit amet. 

<p id = , 'p3'' class = '"class 1 ”>Loren ipsun dolor sit amet.</p> 
<div id= |J div3''> 

Loren ipsun dolor sit amet. 

<p id = ''p4" class =" class! M >Lorem ipsun dolor sit amet.</p> 
</div> 
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11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 
23 


</di v> 

<div id-"’div4' l > 

Loren ipsun dolor sit amet . 

<p id = |J p5" class=" class 1 B >Loren ipsun dolor sit aznet.</p> 
<div id = ”div5 JI > 

Loren ipsun dolor sit amet. 

<p id = N p6" class = J| classl ">Lorem ipsun dolor sit amet.</p> 
</div> 

</div> 

<p id = ,:, p7" class=" classl ">Loren ipsun dolor sit amet.</p> 

<a href=”tf™ class = r 'class'l ">Lorem ipsum dolor sit amet.</a> 
<div id=* div6 ,r >Lorem ipsum dolor sit amet.</div> 

</div> 


Considere tambem que o seguinte codigo CSS foi aplicado ao documento: 


1 #div1 > p + div p.classl i 

2 color: red ; 

3 } 


Quem ficara com texto vermelho? 


a) Apenas o elemento com atributo id igual a p5, 

b) Os elementos com atributo id igual a p5 e p6. 

c) Os elementos com atributo id igual a p2, p5 e p7. 

d) Apenas o elemento com atributo id igual a p3, 

e) Os elementos com atributo id igual a p3 e p4. 


] Considere o seguinte codigo: 


1 

2 
3 


O que podemos dizer sobre as regras CSS definidas dentro da media query acima? 


©media all and (width: 480px} J (orientation: portrait) -[ 
} 


a) Serao aplicadas quando o viewport tiver 480px e a altura do viewport for maior que a sua lar- 
gura. 

b) Serao aplicadas apenas quando a largura do viewport for maior que a sua altura. 

c) Serao aplicadas apenas quando o viewport tiver 480px de largura. 

d) Serao aplicadas quando o viewport tiver 48Gpx ou a altura do viewport for maior que a sua 
largura. 

e) Serao aplicadas apenas quando o viewport tiver 480px de altura. div. 


Minha Pontuacao 


Pontuagao Minima: 



Pontuacao Maxima: 
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Nos capitulos anteriores, vimos que as linguagens HTML e a CSS sao fundamentals para a cria- 
gao de paginas web, O foco do HTML e o conteudo enquanto o foco do CSS e a formatagao dessas 
paginas. 

As linguagens HTML e CSS nao sao linguagens de programagao. Para resolver determinados 
problemas, e necessario utilizar urna linguagem de programagao, Por isso, veremos nesse capitulo, a 
linguagem de programagao JavaScript. 

Com a linguagem JavaScript po demos construir paginas extremamente din arnicas e inter ativas. 
O foco do JavaScript e implementar o comportamento ou a inteligencia das paginas web. 


Aplicando JavaScript ao HTML 


Ha duas formas de associar codigo JavaScript e documentos HTML. 

JavaScript inter no 

O codigo JavaScript pode ser definido dentro de um documento HTML no corpo do elemento 

script. 

1 <script> 

2 alert( u K19"); 

3 </script> 

Nessa abordagem, o codigo JavaScript fica "amarrado” a um unico documento HTML. 

JavaScript externo 

O codigo JavaScript pode ser definido em arquivos separados e depois associados aos documen¬ 
tos HTML atraves do elemento script. 

1 |alert('^I9 IJ ); 

Codigo javascript4.1: scripts 


1 <script src="script.js"></5cript> 


Nessa outra abordagem, podemos reutilizar o mesmo codigo JavaScript em varios documentos 
HTML, 


*W Carregamento 
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Como vimos, o elemento script permite associar codigo JavaScript aos documentos HTML. Esse 
elemento pode ser adicionado dentro do corpo dos elementos head e body, A localizaqao do ele¬ 
mento script afeta o momento no qual o codigo JavaScript sera carregado pelos navegadores. 

No exemplo a seguir, o elemento script foi colocado dentro do corpo do head. Dessa forma, o 
codigo JavaScript sera carregado antes do body ser processado. Consequentemente, a pagina so sera 
exibida depois do carregamento do JavaScript, 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 


< ! DOCTYPE htinl > 

< h t m 1 lang = ,r pt-br"> 

<head? 

<meta http-equiv=" Content-Type" content^" test/html ; charset=UTF-8" > 
<title>DesenvoIviuieriito Web</title? 
f <scr ipt src = " script . js ,[ ?</ script? 

</head? 

<body? 

</body? 

</html> 


No proximo exemplo, o elemento script foi colocado no final do body. Consequentemente, o 
JavaScript so sera carregado depois de todos os outros elementos do body. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 


<!DOCTVPE html? 

<html lang = ?l pt -br"> 

<bead? 

<meta http-equiv-" Content-Type r ' content^" text/html ; charset=UTF-8" ? 
<title?DesenvoIvimento Web</title? 

</head? 

<body? 

f <script src= JI script . js’" ?</script? 

</body? 

</html? 


Normalmente, a segunda abordagem e mais recomendada pois as paginas web sao exibidas mais 
rapidamente aos usuarios. Contudo, eventualmente, o codigo JavaScript deve ser utilizado antes do 
processamento dos elementos do body, Nesses casos, e necessario utilizar a primeira abordagem. 


IP Chrome DevTools 


Os navegadores oferecem alguns recursos para testar ou depurar codigo JavaScript. Nas imagens 
abaixo, mostramos a utilizagao do painel Console do Chrome DevTools. 
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j.bout:blank 

x _ 

4- CD about: blank 

i 0 : & = 

!" Apps reservar dia 

^ Guia da Somana §|] Leaendas - baEee j,23 HTML5 video f^ Comment Mod era! » 

✓ 

' Element! Net-mark Source! 

Timeline Protiles Resources Audits^ Console y $ k 1 


& ^ <topfraniE>T 



■iGouLb'jnk 


CD about; blank v -4| Q = 

i : " Apps etmio re server di-a ^.iCuii,dttSEmauta m Lependas - pAtSd,- ^ HTML5 video fa Comment Morfer-ir » 



' Element! Network Sources Time line Profiles Resources Audits Console 

■: & fl/ 

^ < top frarn e> t 

j console, iog( ' KI9 t remanent os 1 1 

K19 Trelnanemos 

■• undefined 
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a.bciit:b!ank 

<- CD iibourblanii “w! I'fr ^ I 

Appt 4% cano jrewrwtr dlA Gtila.da SemaM fj§|Legendai - ba>it«^ ^3 HTTML5 Video fjj C6>Kimero 


K19 TftinanicjHos 


Elements Ne-rvrark Sources Tlmeli-'se Profilei Resources Audits Cutisole 


y ctop f ram e> t 


» cunso'e.lug( ' KI9 Tresnanentcs ‘) 


K19 TreinanentDE 


: UrMlCTfUsed 


j tfocuiieni. body. innerKTTIL = '^p^KlS TfeinM;eriLos*/p>' 


"•=p=K19 TrcinafnEntos-^/p*" 




Exercicios de Fixa^ao 


@ Abra o Netbeans e crie um projeto chamado javascript. 


Importante 

No Windows k utilizando o IIS (Internet Information Services) como Web Server voce 
deve salvar o projeto javascript em C:\inetpub Vwwwroot, Lembre-se que e necessa- 
rio instalar o IIS conforme vimos anteriormente. 
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Importance 

No Ubuntil, utilizando o Apache HTTP Server conio Web Sender, voce deve salvar o pro- 
jeto javascript em /home/<USUARIO>/public_htmL Lembre-se que e necessario 
instalar e configurer o Apache HTTP Server como vimos anteriormente. 
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« a *! * c 


NetBeans IDE 7.3 

: T K ► «► 


. ' Q,’ Search iSC • I; 


Projects f J 


* O 

Steps 


Choose Project 


[ Ci ihiwufflwwq J 


lT^mp 

► ^ Samples 

1 ] 

.. 


Description: 


Creates a new HTMLS application toHiq'j cd lor HIV.. CSS i id JavaSo'ipL 


/ 

| Help | .. f Neal > J 


Finish Jlapcel_ 


Figura 4.2: Projeto javascript 


aim^c 


NetBeans IDE 7.3 

Till' 


:{^r Search <H+I> O' 


j Q\ 


<Ne Ftojeci 


* O 

Steps 


Mew HTML5 Application 


1. Choose Project 

2. Name 4md LtxatrtWi 

3. Site Template 

4. JavaScript Files 


project Name. 

javascript 

1 

^frojecl Location; 

/Users/keizo/Siles 

1 


Project Folder f Users/kelzo/Sites/Javascript 


D <f=H 


\ 



Help ■; Efack Next > ^ Finish 1 Canual 





I 


Figum 4.3: Projeto javascript 


Arquivo: https:/7github.com/K19/Kl9-Exercicios/archive/k02-javascript-fixacaol.zip 
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e No projeto javascript, crie um arquivo chamado javascript Jit ml. 


1 <!DOCT YPE html> 

2 <h tm 1 lang = '' pt -br' 1 > 

3 <head> 

4 <meta http-equiv = JI Content-Type" content- 1 ' text/html ; charset=UTF-8" > 

5 <title>Java5cript</title> 

6 <script> 

7 alert( r 'K19 r ') ; 

3 </script> 

3 </head> 

10 <body> 

11 <h1>K13 - JavaScr ipt </hi> 

12 </body> 

13 </html> 


Codigo HTML 4.5: javascript. html 


ArqutVOl https: //github . com/KI9YK13-Exercicios/archive/k02-javascript-f ixacac2 . zip 


O No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/javascript.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http: //localho5t/“<USUARIO>/javascript/public_htnil/javascript, html. 


Q Alt ere o arquivo javascript, html do projeto javascript. 


1 

2 

3 

4 

5 

6 

7 

8 
3 

10 

11 

12 

13 


< ! DQCTYPE html > 

<html lang = jr pt-br''> 

<head> 

<meta http-equiv=' r Content-Type" content-" text/html ; char set = UTF-8 11 > 
<title>JavaScript</title> 

</head> 

<body> 

<h1>K13 - JavaScript</h1> 

[ <script> 

[_ alert( J 'K13"); ~ 

| </script> _ 

</body> 

</html> 


Codigo HTML 4.6: java script.html 


Arquivo: https: //github. com/KI 97K1 3-Exercicios/archive/k02- javascript-f ixacao4. zip 


0 


No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/javascript/public_html/javascript . html. 


No Ubuiitu, utilize o Chrome para acessar o endere^o: 


h 11 p: //loca 1 host / LJSLfAR I0> /javascript/ publ i c_ h tml / j a vase ript.html. 


No projeto javascript, crie um arquivo chamado script.js. 
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1 |alert{' J K19 u ) ; 


Codigo Javascript 42: script.js 


Arquivo: https: // Eithub.com/K19/K19-Exercicios/archive/k02-javascript-fixacaoB. zip 


Q Altere novamente o arquivo javascript.html do projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 


< ! DQCTYPE html > 

<html lang = ' l pt-br' l > 

<head> 

<meta http-equiv~ JI Content-Type" content^ 1 ' text/html ; charset=UTF-S" > 
<title>JavaScript</title> 

[ <script src="script.js" ></ script > 

</ head> 

<body> 

<hl>K19 - JavaScript</h1> 

</body> 

</ html> 


Codigo HTML 4 . 7: javascript, html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao7 . zip 


Q No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/javascript/publicjitml/javascript . html. 


No UbuntUp utilize o Chrome para acessar o enderego: 


h 11 p: // loca 1 host / ~< USU AR I0> / j a vase r ipt / publ i c_ h tml / j a vase ript.html. 


Variaveis 


Assim como qualquer linguagem de programa^ao, JavaScript permite a criacao de variaveis atra- 
ves da palavra chave var, Toda variavel deve ter um nome (identificador). 


1 

2 

3 

4 


var idadeDoJonas = 30; 

var precoDoProduto = 28.75; 

var nonteDol nst rutor = ''Harcelo Martins'"; 

var acessoLiberado = true; 


No exemplo anterior, to das as variaveis for am inicializadas. Antes da inicializa^ao, as variaveis 
possuem o valor especial undefined. No proximo exemplo, a variavel altura nao e inicializada. Por- 
tanto, ela possuira o valor undefined. 

1 var altura; 


Operadores 
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Para manipular os valores das variaveis de um programa, devemos utilizar os operadores ofere- 
cidos pela linguagem de programa^ao adotada, A linguagem JavaScript possui diversos operadores 
e os principals sao categorizados da seguinte forma: 

* Aritmetico: + - * / % 

* Atribuigao: = -- *= /= %= ++ — 

* Relational: == !~ <; <~ ;> >= 

* Logico: && || 

Aritmetico s 

Os operadores aritmeticos funcionam de forma muito semelhante aos operadores da matema- 
tica. Os operadores aritmeticos sao: 

* Adigao + 

* Subtragao - 

* Multiplica^ao * 

* Divisao / 

* Modulo % 


1 

var umMaisUm = 1 + 1; 

2 

// umMaisUm = 2 

3 


4 

var tresVezesDois =3*2; 

5 

// tresVezesOois = 6 

6 


7 

var quatroDivididoPorDois =4/2; 

3 

// quatroDivididoPor2 = 2 

9 


10 

var seisModuloCinco = 6 % 5; 

11 

// seisModuloCinco = 1 

12 


13 

var x = 7; 

14 


15 

x - x + 1 * 2; 

16 

X 

1! 

17 


IS 

1-1*1 

1 

X 

II 

X 

19 

to 

II 

X 

20 


21 

x = x / (6 - 2 - (3 * 5) / (16 - 1)) ; 

22 

// x = 2 


Codigo javascript 4.5: Exempto de uso dos operadores aritmeticos 



Importante 

O modulo de um niimero x, na matematiea, e o valor numerico de x desconsiderando 
o seu sinal (valor absoluto). Na matematica expressamos o modulo da seguinte forma: 


| - 2 | = 2 . 


Em linguagens de programagao, o modulo de um numero e o resto da divisao desse niimero por 
outro. No exemplo acima, o resto da divisao de 6 por 5 e igual a 1. Alem disso, lernos a expressao 
6%5 da seguinte forma: seis modulo cinco. 
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Importante 

#^V As operates aritmeticas em JavaScript obedecem as mesrnas regras da matematica 
com relaqao a precedencia dos operadores e parenteses. Portanto, as operates sao 
resolvidas a partir dos parenteses mais internes ate os mais externos, primeiro resolvemos as 
multiplicacoes, divisoes e os modules. Em seguida, resolvemos as adobes e subtra^oes. 


i 

Mais Sobre 

As operaqoes de potencia^ao e raiz quadrada podem ser realizadas atraves dos metodos 
Math, paw e Math*sqrt. Veja alguns exemplos. 

i 

var a = Math,pow(3, 5); 


2 

//a - 243 


3 

4 

var b = Math.sqrt (9); 


5 

U b = 3 



Cddigo Javascript 4.6: Potenciagao e raiz quadrada 



Concatenate) de Strings 


Como vimos anteriormente, o opera dor + e utilizado para realizar soma aritmetica, Mas, ele 
tambem pode ser utilizado para concatenar strings. Veja um exemplo, 

1 

2 

3 

4 

5 

6 


Considere o exemplo a seguir. 


1 

2 

3 

4 

5 


var si = Jr Idade; " ; 
var idade = 30; 

// ''Idade: 3Q r ' 
var s2 = si + idade; 


var 

si = 

" r M 

arcelo" ; 

var 

s2 = 


u ; 

var 

S3 = 

"M 

a r tins 1,1 ; 

// ' 

1 Ma rcelo 

Martins 

var 

s4 = 

si 

+ s2 + 


Observe que o operador + foi aplicado a um valor numerico e a um texto. Nesses casos, o valor 
nurnerico e, automaticamente, transfermado em texto e a concatenaqao e realizada. 


» Pare para pensar... 

As expressoes sao avaliadas da esquerda para a direita. Dessa forma, considere o se- 
guinte exemplo: 

1 alert (1 + 2 + 3 + ,r tes t arido Ir ); 

2 alert ( IP testando M + 1+2 + 3); 


O que seria exibido nesse exemplo? 
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Atribui^ao 

Nas secoes anteriores, ja vimos um dos operadores de atribuigao, o operador = (igual), Os opera - 
dores de atribui^ao sao: 

* Simples- 

* Incremental += 

* Decremental-= 

* Multiplicativa *= 

* Divisoria 

* Modular %= 

* Incremento ++ 

* Decrement©-- 



As instrn^oes acima poderiam ser escritas de outra forma: 
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19 

20 
21 
22 
23 


valor = valor + 1; 
// valor = 2 

valor = valor - 1 ; 
// valor = 1 


C&digo Javascript 4A1:0 mesmo exempto anterior, usando os operadores aritm&kos. 


Como podemos observar, os operadores de atribuigao, exceto o simples (=), reduzem a quan- 
tidade de codigo escrito. Podemos dizer que esses operadores funcionam como “atalhos” para as 
operagoes que utilizam os operadores aritmeticos. 


Relacionais 

Muitas vezes precisamos delerminar a relacao entre uma variavel oil valor e outra outra variavel 
ou valor. Nessas situagoes, utillzamos os operadores relacionais. As operagoes reaiizadas com os 
operadores relacionais devolvem valores booleanos. Os operadores relacionais sao: 


* Igual dade =- 

* Diferenga ! = 

* Menor< 

* Menor ou igual <= 

* Maior> 

* Maior ou igual >= 


1 

var valor = 2; 

2 

var t = false; 

3 

t = (valor == 2); // t = true 

4 

t = (valor != 2); // t = false 

5 

t = (valor < 2) ; // t = false 

6 

t = (valor <= 2); // t = true 

7 

t = (valor > 1); // t = true 

3 

t = (valor >= 1); // t = true 


Codigo Javascript 4.12 ; Exempto de use dos operadores relacionais em JavaScript. 


Ldgicos 

A linguagem JavaScript permite verificar duas ou mais condigoes atraves de operadores logicos. 
Os operadores logicos devolvem valores booleanos. Aseguir descreveremos o funcionamento desses 
operadores. 


var a = Math.random() ; 
var b = Math.randomQ; 

alert Ca > 0.2 £6 b < 0.3); 


Codigo Javascript 4.13: Exempto de uso do operador & 


A tabela verdade e uma forma pratica de visualizar o resultado dos operadores logicos. Veja a 
seguir a tabela verdade do operador &&, 
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a >0.2 

b < 0.8 

a > 0.2 && b < 0.8 

V 

V 

V 

V 

F 

F 

F 

V 

F 

F 

F 

F 


Figura 4.4: Tabela verdade do operador && 


* ii rou-j 


1 

2 

3 

4 


A tabela verdade e uma forma pratica de visualizar o resultado dos operadores logicos. Veja a 
seguir a tabela verdade do operador ||. 


var a = Nath. random() ; 
var b = Nath. random (); 

alert(a > 0,2 || b < 0.3); 

Cadigo Javascript 4.14: Exemplo de uso do operador ]| 


a >0.2 

b < 0.8 

a > 0.2 | b < 0.8 

V 

V 

V 

V 

F 

V 

F 

V 

V 

f n 

r f 

F 


Figura 4.5: Tabela verdade do operador |J 


Operador ‘T 

Valores booleanos podem ser invertidos com o operador de T h [negagao). Por exemplo, podemos 
verificar se uma variavel numerica armazena um valor maior do que 0,5 de duas formas diferentes. 

1 Id > 0,5 


1 !(d <= 0.5) 


Pr 6 e Pds Incremento ou Pr4 e P6s Decremento 

Os operadores e podem ser utilizados de duas formas diferentes, antes ou depols de 
uma variavel numerica. 


1 var i ~ 10; 

2 i ++ ; 
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1 var i - 10; 

2 ++i; 

3 -i; 


No primeiro exemplo, o operador "++" foi utilizado depois da variavel i. Ja no segundo exemplo, 
ele foi utilizado antes da variavel i. A prirneira forma de utilizar o operador “++” e chamada de pds 
incremento. A segunda e chamada de prd incremento, Anaiogamente, o operador " foi utilizado 
na forma de pds decremento no primeiro exemplo e prd decremento no segundo exemplo. 

Mas, qual e a diferenga entre prd incremento e pds incremento ou entre prd decremento e pds 
decremento? Vamos apresentar adiferenca com alguns exemplos. 

1 

2 

3 

4 


var i = 10; 

// true 

alert(i++ == 10); 


Observe que o operador foi utilizado nas expressoes do exemplo acima em conjunto com 
o operador Como dois operadores foram utilizados na mesma expressao, voce pode ter dii- 

vida em relagao a ordem de execu^ao desses operadores. O incremento com o operador sera 
realizado antes ou depois da comparacao com o operador "==”? 

Como o operador "++'* foi utilizado na forma de pds incremento, a comparacao ocorrera antes 
do incremento. i\nalogamente, a comparacao ocorreria antes do decremento se o operadorfosse 
utilizado na forma de pds decremento. 

Agora, considere autiiizagao do operador"++” na forma de prd incremento. 

1 

2 

3 

4 


var i = 10; 

// false 

alert(++i == 10); 


Nesse ultimo exemplo, a comparacao com o operador “==” e realizada depois do incremento 
do operador Analogamente, a comparacao ocorreria depois do decremento se o operador 
fosse utilizado na forma de pre decremento. 


JRfc Pare para pensar,.. 

p 

Considere o comportamento do pr& incremento, pds Incremento, prd decre¬ 
mento e pds decremento. O que seria exibido nos exemplos abalxo? 

1 

2 

3 

4 

5 


var i = 10; 

var j = ++i + i--; 

alert(j); 
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Operador terndrio 

Considere um programa que controia as notas dos alunos de uma escola, Para exemplificar, va- 
mos gerar a nota de urn aluno aleatoriamente. 

1 var nota = Math.randomQ; 


O programa deve exibir a mensagem “aprovado” se nota de um aluno for maior ou igual a 0.5 
e "reprovado’’ se a nota for menor do que 0.5, Esse problema pode ser resolvido com o operador 
ternario. 


nota >= 0.5 

0 

"aprovado" 

; 

"reprovado" 

1 

Condsgao 


* 

Valor 1 


t 

Valor 2 


Figura 4.6: Operador ternario 


Quando a condigaofnota >= 0*5) e verdadeira, o operador ternario devolve o primeiro resuitado 
("aprovado”). Caso contrario, devolve o segundo resuitado(“reprovado”). Podemos guardar o resui¬ 
tado do operador ternario em uma variavel ou simplesmente exibi-lo. 

1 var resuitado = nota >= 0.5 ? ^aprovado" : " reprovado" ; 

2 alert (nota >= 0.5 ? "aprovado" : "reprovado"); 


Nos exemplos anteriores, o operador ternario foi utilizado com valores do tipo string. Contudo, 
podemos utiliza-lo com qualquer tipo de valor. Veja o exemplo a seguir. 


i 

var i = nota >= 0.5 

7 

1 : 

2; 

2 

var d = nota >= 0.5 

7 

0. 1 

: 0.2; 


Controle de fluxo 


if e else 

O eomportamento de uma aplicagao pode ser influenciado por valores definidos pelos usuarios. 
Por exemplo, considere um sistema de cadastro de produtos. Se um usuario tenta adicionar um 
produto com prego negativo, a aplicagao nao deve cadastrar esse produto. Caso contrario, se o prego 
nao for negativo, o cadastro pode ser realizado normalmente. 

Outro exemplo, quando o pagamento de um boleto e realizado em uma agenda bancaria, o sis- 
tema do banco deve verificar a data de vencimento do boieto para aplicar ou nao uma multa por 
atraso. 

Para verificar uma determinada condigao e decidir qual bloco de instrugoes deve ser executado, 
devemos aplicar o comando if. 

1 if (preco < 0) { 

2 alert ('0 prego do produto nao pode ser negativo'); 
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3 } else i 

4 alert( 'Produto cadastrado com sucesso'); 

5 } 


O comando if permite que valores booleanos sejam testados. Se o valor passado como parametro 
para o comando if for true, o bloco do if e executado. Caso contrario, o bloco do else e executado. O 
comando else assim como o seu bloco sao opcionais. 


while 

Em alguns casos, e necessario repetir uin determinado trecho de codigo varias vezes. Por exem¬ 
pt suponha que seja necessario exibir 5 vezes a mensagem: "Bom Dia". Podemos resolver essa 
tarefa com o seguinte codigo JavaScript, 

1 

2 

3 

4 

5 


console . log(" Bom Dia") 
console . log(" Bom Dia") 
console . log(" Bom Dia") 
console , log C " Bonn Dia") 
console , log £ " Bom Dia") 


Se ao iiives de 5 vezes fosse necessario exibir 100 vezes a mensagem "Bom Dia" ja seriam 100 
iinhas de codigo JavaScript. E muito trabalhoso utilizar essa abordagem para solucionar esse pro- 
blema. 

Atraves do comando while, e possivel executar varias vezes uin determinado trecho de codigo. 


1 

2 

3 

4 

5 

6 


var contador = 0; 

while (contador c 100) £ 
console.log(" Bom Dia"); 
contador++; 

} 


Codigo Javascript 4.27: while 


A variavel contador indica o numero de vezes que a mensagem “Bom Dia” foi exibida. O operador 
++ incrementa a variavel contador a cada iteragao. O parametro do comando while deve ser um valor 
booleano. 


for 


O comando for e analog© ao while, A principal diferen^a entre esses dois comandos e que o for 
recebe tres argumentos. 


1 

2 
3 


for(var contador = 0; contador < 100; contador++) £ 
console.log( "Bom Dia"); 

} 



Exercicios de Fixa^ao 


@ Adicione um arquivo chamado exibe-nome,html no projeto javascript. 
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1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DQCTYPE html> 

<html lang=" pt-br "> 

<bead> 

<m 0 ta http-equiv=" Content-Type w content^ 1 2 ' text/html ; charset=UTF-8" > 
<title>K19 - JavaScript</title> 

<script type=" text / javascript" src =,l exibe -nome . js lr ></ scr ipt> 

</head> 

<body> 

</body> 

</html> 


Cddigo HTML 4.8: exibe-nome.html 


Arquivo: https: //github.com/K19/Kl9-Exercicios/archive/k02-javascript-f ixacaoS . zip 


^ Adicione um arquivo chamado exibe-nome.js no projeto javascript. 


1 for(var contador = 0; contador < 100; contador++) { 

2 console . log('' Rafael Cosentino" ); 

3 } 


Codigo Jai'ascrip14.29: exibe- nome.js 


Arquivo: https: //github.com/Kl9/K19-Exercicios/archive/k02-javascript-f ixacaol 0 , zip 


© No Windows, utilize o Chrome para acessar o end ere go: 


http: //localhost/javascript/publicjitril/exibe-nome. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/j avase r ip t /public_h tml/e xibe-nome. h tml . 

Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado exibe-l-ate-100.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<IDOCTYPE html> 

<htrail lang= " pt -br' 1 > 

<head> 

<meta http-equiv-" Content-Type" content^" text/html ; charset=UTF-8" > 
<title>K19 - JavaScript </ title> 

<scr ipt type = ” text/ javascript ,r sre^ 1 exibe -1 - ate -1 00 . js "></ script > 

</head> 

<body> 

</body> 

</html> 


Cddigo HTML 4.9: exibe-l-ate-100.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacaol2. zip 


^ Adicione um arquivo chamado exibe-1 - ate-100. js no projeto javascript. 


1 for(var contador = 0; contador < 100; cont3dor++) { 

2 console.log(contador); 
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iJl 


Codigo javascript 4.30: exibe-1 -are-100 js 


Al'CjUivo: https://github.com/K19/K19-Exercicio5/archive/k02-javascript-fixacacl3. zip 


^ No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/exibe- 1 -ate-100. html. 


No Xlbuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USUARIO/java5cript/public_html/exibe-l-ate-100. html. 


Verifique as mensagens exibidas no console do navegador. 


© Percorra todos os numeros de 1 ate 100. Para os numeros fmpares, exiba no console um e 
para os numeros pares, do is Veja o exemplo abaixo: 


* 

* 

* 

** 


Adicione um arquivo chamado exibe-padrao-l.html no pro;eto javascript. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 


<!DOCTYPE html> 

<html larcg = " pt-br' 1 2 3 4 5 6 7 > 

<head> 

<meta http-equiv='‘ Content -Type " content^" text/html ; charset =UTF-8" > 
<title>K19 - JavaScript</title> 

<script type = J| text / javascript" src^' 1 exibe - padrao -1 , j s Jl ></script> 
</head> 

<body> 

</body> 

</html> 


Codigo HIM! 4JO: exibe-padrao- 1 .html 


ArCfUiuo: https://github.com/K19/Kl9-Exercicios/archive/k02- javascript-fixacaol 5. zip 


^ Adicione um arquivo chamado exibe-padrao -l.js no projeto javascript. 


1 for(var contador = 1; contador <= 100; contador++) ■[ 

2 var resto = contador % 2; 

3 if(resto == 1) { 

4 console . log( "* 15 ) ; 

5 } else i 

6 console.log(" **' r ) ; 

7 } 

3 1 
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Ccdigo Javascript 4.31: exibe-padma-1 .Js 


Arquivo: https://github.com/K19i/ICl9-Exercicios/archive/k02-javascript-fixacaol 6, zip 


Q No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/exibe-padrao-l . html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


h 11 p://loca1host/~<USUARIG>/j avase rip t/public_h tml/e xibe-pad rao-1.html. 

Verifiqiie as mensagens exibidas no console do navegador. 


© Percorra todos os numeros de 1 ate 100. Para os numeros multiples de 4, exiba a palavra "PIN”, 
e para os outros, exiba o proprio numero. Veja o exemplo abaixo: 


1 

2 

3 

PIN 

5 

6 
7 

PIN 


Adi clone urn arquivo charnado exibe-padrao-2,htmi no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DOCTYPE html> 

<html lang = ,, pt-br"> 

<head> 

<meta http-equiv = ’" Content-Type |J content=" text/html ■ char set = UTF-S'" > 
<title>K19 - JavaScript</title> 

<script type=" text/javascript" src="exibe -padrao -2 . js 41 ></script> 

<J head> 

<body> 

</body> 

</html> 


Cadi go ff JM£ 4.11: exihe-padrao-2.html 


Arquivo: https://github.coin/K19/K19-Exercicios/archive/k02-javascript-fixacaol8 . zip 


^ Adicione um arquivo chamado exibe-padrao-2. js no projeto javascript. 


1 for(var contador = 1; contador <= 100; contador++) £ 

2 var resto = contador % 4 ; 

3 if (resto == 0) £ 

4 console . log ( 14 PI ") ; 

5 } else £ 

6 console.log(contador); 
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7 1 

3 1 


Codigo Javascript 4.32: exibe-padmo-2.js 


Al'CfUiUO: https://github.com/K19/KT 9-Exercicio5/archive/k02-javascript-fixacaol 9, zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/exibe-padrao-2.html. 


No Ufountu, utilize o Chrome para acessar o endere^o: 


http: //localhost/~<USUARIO>/java5cript/public_htrnl/exibe-padrao-2. html. 


Verifique as mensagens exibldas no console do navegador. 


Objetos 


Uni objeto e urn conjunto de propriedades. Toda propriedade possui nome e valor. O nome 
de uma propriedade pode ser qualquer sequencia de caracteres. O valor de uma propriedade pode 
ser qualquer valor exceto undefined. Podemos adicionar uma nova propriedade a uni objeto que ja 
existe. Urn objeto pode herdar propriedades de outro objeto utilizando a ideia de prototype. 


Criando objetos 


Um objeto pode ser criado de forma literal com a sintaxe JSON, Veja o exernplo a seguir, 

1 var objetoVazio = i }; 

2 var curso = { 

3 sigla: "KIT", 

4 nome: "Orienlagao a Objetos em Java" 

5 }; 


Um objeto pode se relacionar com outros objetos atraves de propriedades. Observe o codigo 
abaixo. 

1 var formacaoJava = { 

2 sigla: "KID" , nome: H Formagao Desenvolvedor Java", 

3 cursos: [ 


4 { 


5 

6 
1 

3 t 

9 

10 

11 J, 

12 ] 

13 }; 


sigla: "KIT" , 

nome: "Qrientagao a Objetos em Java 


sigla: " K 1 2" , 

nome: "Desenvolvimento Web com JSF2 e JFA2 
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Recuperando o valor de uma proprledade 

Para recuperar os vaiores das propriedades de urn objeto, podemos utilizar o operadoron “ []". 
Veja o exernpio a seguir. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


var curso = { 
sigla: ''KIT", 

nome: "Orientagao a Objetos em Java" 

}; 

console . log- (curso . sigla) ; 
console . log (curso [ |J sigla 1 2 3 4 ']) ; 

var sigla = "sigla"; 
console.log(curso[sigla]); 


Alterando o valor de uma propriedade 

Para alterar o valor de uma propriedade, basta atribuir um novo valor a propriedade do objeto. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


var curso = { 
sigla: "KIT", 

nome: "Orientagao a Objetos em Java" 

}; 

curso.sigla = "K12" ; 

curso.nome - "Desenvolvimento Web com JSF2 e JPA2" ; 

console.log(curso.sigla) ; 
console.log(curso.nome); 


References 

Os objetos sao acessados atraves de references. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 


var curso = ( 
sigla: "KIT", 

nome: "Orientagao a Objetos em Java" 

}; 

// copiando unta referenda 
var x = curso; 

x.sigla = "K12 " ; 

x.nome = " Desenvolvimento Web com JSF2 e JPA2" ; 

// imprime K12 

console.log(curso.sigla) ; 

// imprime Desenvolvimento Web com JSF2 e JPA2 
console.log(curso.nome); 


Protdtipos 

Podemos criar um objeto baseado em outre objeto existente (prototipo). Para isso, podemos 
utilizar a propriedade especial_proto_. Observe o codigo abaixo. 

1 // criando um objeto com duas propriedades 

2 var curso = { 

3 sigla: "KIT", 

4 nome: "Orientagao a Objetos em Java" 


«KI9 www. f ac ebook. com/k 1 9trei nam entos 


325 

















JAVASCRIPT 


326 


5 }; 

6 


7 

// criando um objeto sem propriedades 

3 

Q 

var novo.curso = {}; 

J 

10 

// definindo o primeiro objeto como prototipo do segundo 

11 

novo_curso._proto_ = curso; 

12 


13 

// imprime K11 

14 

console.log(novo_cu rso.sigla); 

15 


16 

// imprime Orientagao a Objetos em Java 

17 

console.log(novo_cu rso,nome); 


Tambem podemos utilizar o metodo create de Object para criar objetos baseados em objetos 
existentes. Veja o exemplo abaixo. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 

15 

16 
17 


// criando urn objeto com duas propriedades 
var curso = ( 
sigla: ir K 1 1 Ir , 

none: "Orientagao a Objetos em Java" 

}; 

// criando um objeto sem propriedades 
var novo_curso = {}; 

// definindo o primeiro objeto como prototipo do segundo 
[novo curso = Object .create (curso); 


// imprime K11 

console.log ( novo_cu rso.sigla); 

// imprime Orientagao a Objetos em Java 
console . log Cnovo_cu rso . nome) ; 


Se uma propriedade for adicionada a um objeto, ela tambem sera adicionada a todos os objetos 
que o utilizam como prototipo. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 

15 

16 
17 


var curso = { 
sigla: "KIT", 

nome: "Orientagao a Objetos em Java" 

}; 

var novo_curso = Object.create(curso); 


curso.carga horaria = 36; 


// i in prime K11 

console.log f novo_cu rso,sigla); 

// imprime Orientagao a Objetos em Java 
console.log(novo_cu rso.nome); 

// imprime 36 

console.log(novo_cu rso.carga_horaria); 


Por outro lado, se uma propriedade for adicionada a um objeto, ela nao sera adicionada no pro¬ 
totipo desse objeto. 


1 

2 

3 

4 

5 


var curso = { 
sigla: "Kir 1 p 

nome: "Orientagao a Objetos em Java" 

); 
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6 

7 

var novo.curso = Object . create(curso); 

3 

! novo curso.carga horaria = 36; 

9 

10 

H imprime Kll 

11 

console,log(curso,sigla); 

12 


13 

// imprime Orientagao a Objetos em Java 

14 

console.log(curso,nome); 

15 


16 

/V imprime undefined 

17 

console.log(curso,carga_boraria); 


Se o valor de uma propriedade de urn objeto for modificado, os objetos que o utilizam corao 
proto tip o podem ser afetados. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 

15 


var curso = ( 
sigla : "K11" , 

nome: "Orientagao a Objetos em Java" 

}; 

var novo_curso = Object.create(curso); 


[ c u r s o , sTgl a = =' 11 K12 31 ; 

curso.nome = "Desenvolvimento Web com JSF2 e JPA2 11 ; 


// imprime K12 

console.log(novo_cu rso,sigla); 

// imprime Desenvolvimento Web com JSF2 e JPA2 
console,log C novo_cu rso.none); 


Por outro lado, alteraqoes nos valores das propriedades de um objeto nao afetam o prototipo 
desse objeto. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 


var curso = { 
sigla: "KIT", 

nome: "Orientagao a Objetos em Java" 


var novo_curso = Object,create(curso); 
fnovo.cursQ.sigla = "K : 2 " ; 

[novo cur so ^norne = " Desenvoiv imento Web corn J5F2 e JFA2"; 

// imprime Kll 

console.log(curso,sigla) ; 

// imprime Orientagao a Objetos em Java 
console.log(curso.nome); 


Considere urn objeto que foi construido a partir de um prototipo, Se o valor de uma propriedade 
herdada do prototipo for alterada nesse objeto, ela se torna independente da propriedade no proto- 
tipo. Dessa forma, alteraqoes no valor dessa propriedade no prototipo nao afetam mais o valor dela 
no objeto gerado a partir do prototipo. 

1 var curso = { 

2 sigla: "Kll", 

3 nome: ''Orientagao a Objetos em Java" 

4 }; 

5 

6 var novo.curso = Object . create(curso); 

7 
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Removendo uma Propriedade 

Podemos remover uma propriedade de um objeto com a ftmgao delete. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 


var curso = { 
sigla: 41 K 1 T 4r , 

none : " Orientagao a Ob jet os ern Java' 1 

}; 

// imprime K11 

console , log(curso . sigla) ; 

delete curso.sigla; 

U imprime undefined 
console.log(curso,sigla) ; 


Veriflcando a Existencia de uma Propriedade 

Podemos verificar se uma propriedade exlste, podemos ulilizar a fungao in. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


var curso = ( 
sigla : 41 K1 1 41 , 

nome : "Orientagao a Objetos em Java 41 

}; 

// imprime true 

console . log ( 14 sigla " in curso); 

// imprime false 

console . log ( 14 ca rga_hora ri a 14 in curso); 



Exercicios de Fixa^ao 


o Adicione um arquivo chamado objetos.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<! DGCT/PE html> 

< h t m 1 lang = " pt -br 4l > 

<head> 

<meta http-equiv- 41 Content-Type r4 content^ r4 test / htinl ; charset = UTF-8" > 
<title>K19 - JavaScript</title> 

<script type = " text/javascript 41 src= 41 objetos , js p ></script> 

</head> 

<body> 

</body> 

</html> 
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Codigo HTML 4.12: objetos.html 


Arquivo: https: //github. cofn/K19/K19-Exercicios/archive/kG2-javascript-f ixacaoZT . zip 


© Adicione um arquivo chamado objetos.js no projeto javascript. Crie objetos com propriedades 
charnadas sigla e nome. Exiba o valor dessas propriedades no console do navegador. 

1 

2 

3 

4 

5 

6 
7 


var curse = {sigla: "K'll", none: ''Grientagao a Objetos em Java"}; 
console . log(curso . sigla) ; 
console.log(curso.nome}; 

var eurso2 = -[sigla; ■" K 1 2 ,r , nome: " Desen volv imento Web corn JSF2 e JPA2 ” }; 
console.log(cu rso2.sigla}; 
console.log(cu rso2,none); 


Codigo javascript 4.47: objetosjs 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao22.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_htril/objetos.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


h 11 p://loca1 host/ ~< USUARI0>/j av asc r i p t /public_ h tml/obj eto s . h tml . 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado referencias.html no projeto javascript. 


1 

2 

3 

4 

5 

6 

7 

8 
3 

10 


<!DOCTVPE html > 

<html lang=' r pt -br"> 

<head> 

<meta http-equiv = J| Content-Type ” content-” text/html ; charset=UTF-8 " > 
<title>K19 - JavaScript</title> 

<script type-' 1 2 3 4 5 6 7 text/ javascript * l src = > ' referencias . js ”></script> 

</ head> 

<body> 

</body> 

</html> 


Codigo HTML 4.13: referencias.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao24.zip 


© Adicione um arquivo chamado referenda®.js no projeto javascript. 


1 var curso = {sigla: ”K11 r ' 3 nome; ''Grientagao a Objetos em Java 1 '}; 

2 

3 // exibe K11 

4 console.log(curso.sigla) ; 

5 

6 // exibe Orientagao a Objetos ern Java 

7 console.log(curso.nome}; 
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3 

9 

10 

11 

12 

13 

14 

15 

16 

17 

18 


var x = curso; 
x.sigla = "K12 1 '; 

x.nome = "Desenvolvimento Web com JSF2 e JPA2" ; 
// exibe K12 

console.log Course.sigla); 

// exibe Desenvolvimento Web com J5F2 e JPA2 
console . log (curso . nome) ; 


Cddigo Javascript 4AS: referentialjs 


ArqUivo: https://github.com/K19/K19-Exercicios/archive/kQ2-javascript-fixacao25.zip 




No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/publicjitml/referencias.html. 

No Ufountu, utilize o Chrome para acessar o endereqo: 

http: //local host/ r '<USUARIO>/javascript/publ ic_html/referenda s . html. 


Verifique as men sage ns exibidas no console do navegador. 


0 Adicione uni arquivo chamado prototype.html no pro]eto javascript. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 


<’DOCTYPE html> 

<html lang=" pt-br"> 

<head> 

<meta http-equiv = : " Content-Type w content = " text/ html ; charset = UTF-S" > 
<title>K19 - JavaScript</title> 

<script type-" text / javascript " src = " prototype . js "xf scri pt > 

</head> 

<body> 

</body> 

</html> 


Codigo HTML 4.14 : prototype.html 


Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-javascript-fixacao27.zip 


© Adicione um arquivo chamado prototypes no projeto javascript. Crie uni objeto a partir de 
outro objeto existente. 

1 

2 

3 

4 

5 

6 
7 
3 
9 


var curso = {sigla: "Kll", none: "Orientagao a Qbjetos em Java 1 ' 1 }; 
var novo_curso = Object.create(curso); 

// exibe K11 

console.log(novo_cu rso.sigla); 

// exibe Qrientagao a Qbjetos em Java 
console.log(novo_cu rso,none); 

Codigo Javascript 4.49: prototype.js 


Arquivo: https://github.com/K19/K19-Exercicios/archive/kQ2-javascript-fixacao28,zip 
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@ No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/prototype , html. 

No Ubuntu, utilize o Chrome para acessar o endereqo: 


http: //localhost/ r ’<USUARIO>/javascript/public_htcnl/prototype. html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado propriedade-l*html no projeto javascript. Defina uma propri- 
edade em um objeto utilizado como prototipo e verifique que essa propriedade sera adicionada nos 
objetos criados a partir desse prototipo. 

1 

2 

3 

4 

5 

6 

7 

8 
9 

10 


<!D0CTYPE html > 

<html lang="pt -br"> 

<head> 

<meta http-equiv = J| Content-Type* content=" test/html ; charset=UTF -0"> 
<title>K19 - JavaScriptc/title> 

< script type-" text / javascript " src = J| propriedade -1 „ js "></ scri pt > 

</ head> 

<body> 

</body> 

</html> 


Cddigo HTML 4.15 ; propriedade-1.html 


Arquivo: https://github . com/KI9/K19-Exercicios/archive/k02-javascript-fixacao30.zip 


m Adicione um arquivo chamado propriedade-1 js no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 


Cddigo Javascript 4.50: propriedade-l.js 


Arquivo: https: //github.com/KIS/KI 9-Exercicios/archive/k02- javascript-f ixacao31 . zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 

http://localhost/javascript/publicjitml/propriedade-l , html. 

No Ubuntu, utilize o Chrome para acessar o endereco: 

h 11 p://loca1host/USUARI0>/javascript/public_h tml/prop riedad e-1.htm1. 


var curso = {sigla: ''KIT 1 ', none: "Grienta^ao a Objetos esn Java 1 '}; 
var novo_curso - Object.create(curso); 
curso.carga_horaria = 36; 

// exibe KI1 

console.log ( novo_cu rso.sigla); 

// exibe Orientagao a Objetos em Java 

console.log(novo_cu rso,none); 

// exibe 36 

console . log (novo_cu rso . carga_horaria); 
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Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado propriedade-2, html no piojeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DGCTYPE h t ml> 

< ht m1 lang="pt -br"> 

<head> 

<meta http-equiv = "Content-Type" content= "text/html ; charset=UTF-B" > 
<title>K19 - JavaScript</title> 

<script type-" text/javascript'' src = J| propriedade -2.js"x/script> 
</head> 

<body> 

</body> 

</html> 


Codigo HTML 4.16: propriedade-2.html 


AlCflliuo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao33. zip 


© Adicione um arquivo chamado propriedade-2,js no projeto javascript, Defina uma propriedade 
ern um objeto e verifique que o prototipo desse objeto nao e afetado, 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 


var curse = {sigla: "KIT 1 2 3 4 ', none: ''Grientagao a Objetos em Java"}; 
var novo_curso = Object.create(curso); 
novo_curso,carga_horaria = 36; 

// exibe KIT 

console.log(curso.sigla) ; 

// exibe Orientagao a Objetos em Java 
console,log(curso.nome); 

// exibe undefined 

console.log(curso.carga_horaria); 

Cddigo Javascript 4.51: propriedade-2.js 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao34.zip 




No Windows^ utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/propriedade-2.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/™<USUARIO>/javascript/public_html/propriedade-2.html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado propriedade-3,html no projeto javascript. 


1 < ! DOCT'/PE html > 

2 <html lang="pt -br" > 

3 <head> 

4 <meta http-equiv = J| Content-Type" content^ '* text/html ; charset = UTF-8" > 
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5 

6 
7 
3 
9 

10 


<title>K19 - JavaScript^/title> 

<script type=" text/javascript" src-' 1 2 3 4 5 6 7 * 9 propriedade -3. js ”></script > 
</head> 

<body> 

</body> 

</html> 


Codigo HTML 4.17: propriedade-3.html 


Arcjllivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao36. zip 


@ Adicione urn arquivo chamado propriedade-3*js no projeto javascript. Altere o valor de uma 
propriedade de urn objeto utilizado como prototipo e verifique que essa alteraqao afetara os objetos 
crlados a partir desse prototipo. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 

15 

16 

17 

18 


var curso = (sigla: "K 1 1 "■ 3 none; "Orienta^ao a Objetos em Java 1 ' 1 }; 
var novo_curso = Object . create(curso); 

// exibe K11 

console.log(novo_cu rso.sigla); 

// exibe Orientagao a Objetos em Java 
console.log (novo_cu rso,none); 

curso . sigla = "K1 2" 

curso. nome = J| Desen volvimento Web coin JSF2 e JPA2 1,1 ; 

!f exibe K12 

console.log(novo_cu rso.sigla); 

// exibe Desenvolvimento Web com JSF2 e JPA2 
console.log(novo_cu rso,name); 


Cortigo Javascript 4.52: prapriedade S. js 


Arquivo: https://github.com/KIS/KI9-Exercicios/archive/k02-javascript-fixacao37.zip 


© 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/propriedade-3.html. 


No Ufountu, utilize o Chrome para acessar o endereqo: 


http: //localhost/^<USUARIO>/javascript/pijblic_html/propriedade-3. html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado propriedade-4,html no projeto javascript. 


1 <!DOCTYPE html> 

2 <btml lang = ?l pt-br' 1 > 

3 <head> 

4 <meta http-equiv = ! " Content-Type" content^” text /html ; charset=UTF-8" > 

5 <title>K19 - Java5cript</title> 

6 <script type = ' r text/javascript" src = " propr iedade-4. js "></script > 

7 </head> 

3 <body> 

9 </body> 
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10 |</html> 


Codigo HTML 4.18: pivpriedade-4.html 


ArCjUiVO‘ ■■ 11 ps : //github . cqt/K 1S/K1 9-bxerciciQs/archive/k02-javascript-fixacaolf, zip 


Adicione um arquivo charaado propriedade-4,js no projeto javascript, Reescreva em um objeto 
as propriedades herdadas de um prototipo e verifique que alteragoes nos valores dessas proprieda- 
des no prototipo nao afetam mais os valores delas nesse objeto. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 
T9 
20 
21 


var curso = {sigla: "KIT 1 2 3 ", none: ''Gri entagao a Qbjetos em Java 1 '}; 
var novo_curso = Object.create(curso); 
novo_curso.sigla = "K12"; 

novo.curso.nonte = ”Desenvolvimento Web com JSF2 e JPA2" ; 

// exibe K12 

console,log(novo_cu rso.sigla); 

// exibe Desenvolvimento Web com JSF2 e JPA2 
console , log(novo_cu rso , norue) ; 

curso.sigla = "K21 " ; 

curso, nome = " Pers i stencia com JPA2 e Hibernate' 1 ; 

// exibe K12 

console,log t novo_cu rso,sigla}; 

// exibe Desenvolvimento Web com JSF2 e JPA2 
console,log(novo_cu rso.none); 


Codigo Javascript 4.53: pmpriedade-4.js 


ArCjlliVOl https: /7github.com/K19/K19-Exercicios/archive/k02-javascript-f ixacao40 . zip 


o No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/javascript/public_html/propriedade-4.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


h 11 p://loca 1h ost/USUARI0>/javascript/publi c_ h tm 1 /prop r iedad e-4.html. 


Verifique as mensagens exibidas no console do navegador. 


*W Funcoes 


As fungoes em JavaScript sao objetos. Voce pode armazena-las em variaveis, arrays e outros ob^ 
jetos, Elas podem ser passadas como argument© ou devolvidas por outra fungao. Veja o exemplo 
abaixo. 


1 var multiplicacao = function(x r y) L 

2 return x * y; 

3 } 
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Codigo Javascript 4,54: Uma forma de criar umafim^do 


1 

2 

3 


Codigo Javascript 4.55 : Outra forma de criar umafungdo 


function multiplicacao(x h y) { 
return x * y; 

} 


Utilizando uma Fungao 

Para utilizer a fungao mill tip lie acao, po deni os chama-la da seguinte forma. 


1 I var resultado = multi pi i cagao (3 f 2) ; 


Codigo Javascript 4.56: Utilizando a fun$ao 


Mdtodo 


Quando uma fungao faz parte de um objeto, ela e chamada de metodo. Para executar um metodo, 
devemos utiiizar a referencia de um objeto e passar os parametros necessaries. Observe o codigo 
abaixo. 


1 

2 

3 

4 

5 

6 
7 
S 
9 


var conta = { 
saldo: Q, 

deposita: function (valor) { 
this. saldo += valor; 

1 

1 

conta.deposita(100); 
console.log(conta.saldo); 


Codigo Javascript 4.57: Metodo 


Apply 

Uma fungao pode ser associada momentaneamente a um objeto e executada atraves do metodo 

apply. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


var deposita = function (valor) { 
this .saldo += valor; 

1 

var conta = { 
saldo: 0 

} 

deposita.apply(conta r [200]); 
console.log(conta.saldo); 


Codigo Javascript 4.58 ; Metodo apply 


Arguments 

Os argumentos passados na chamada de uma fungao podem ser recuperados atraves do array 
Arguments. Inclusive, esse array permite que os argumentos excedentes sejam acessados. 
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1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

11 

12 

13 


var soma = function () { 
var soma = 0; 

for(var i = 0; i < arguments. length; i ++) -[ 
soma -•-= arguments [i]; 

} 

return soma; 


var resultado = soma(2,4,5 , 6 ,1) ; 
console, logCresultado) ; 


Codigo javascript 4.59: Arguments 



Exercicios de lixacao 


© Adicione um arquivo chamado multiplicacao.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DOCTVPE html> 

<html lang="pt -br"> 

<head> 

<meta http-equiv = J| Content-Type™ content =" test/html ; charset = UTF-3" > 
<title>K19 - JavaScript*:/ti tie > 

<script type-" text/ javascript" src = J| multipiicacao . js ”></script > 

</ head> 

<body> 

</body> 

</html> 


Qxtigo HTML 4.19: multiplioacao.html 


Arquivo: https://github,com/K19/K19-Exercicios/archive/kQ2-javascript-fixacao42.zip 


© Adicione um arquivo chamado multiplicacao.js no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 


Arcflliuo: https://gLthub.com/K19/K19-Exercicios/archive/k02-javascript-fixacao43. zip 


^ No Windows, utilize o Chrome para acessar o endere^o: 

http://localhost/javascript/publicjitml/multiplicacao.html. 

No Ubuntu, utilize o Chrome para acessar o endereco: 


var multiplicacao = function(x f y) i 
return x * y ; 

}; 

var resultado = multipiicacao (5 , 3); 
console.log(resultado) ; 

Codigo Javascript 4.60: multiplicacao.js 
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ht tp: //localhost/'~<USUARIO>/j avascript/publ ic_html/multipli cacao, html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione ura arquivo chamado metodos.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


< ! DOCTVPE html > 

<html lang = ' 1 2 3 4 5 6 7 pt-br *' > 

<bead> 

<meta http-equiv = JI Content-Type H cantent = " text/htjnl ; charset=UTF-8 J| > 
<title>K19 - JavaScript</title> 

<script type=" text/ javascript " src=-" metodos . js ”></ script > 

</head> 

<body> 

</body> 

</html> 


Codigo HTML 420: metodos.html 


Arquivo: https://github.com/K197K19-Exercicios/archive/k02- javascript-fixacao45. zip 


© Adicione um arquivo chamado metodos.js no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


var corcta = { 
saldo: 0 r 

deposita: function(valor} { 
this . saldo +•- valor ; 

} 

}; 

conta . deposita (500) ; 
console.log(con ta.saldo) ; 


CodigoJavascript4.61: metodos.js 


Arquivo: https://github.com/Kl9/k19-Exercicios/archive/k02-javascript-fixacao46.zip 


O No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/javascript/publicjitml/inetodos. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://loca1host/~<USUARIO>/javascript/public_html/metodos.html. 


Verifique as mensagens exibidas no console do navegador. 


@ Adicione uin arquivo chamado soma.html no projeto javascript. 


1 <!DOCT/PE html > 

2 <html lang = ,f pt-br n > 

3 <head> 

4 <meta http-equiv = ,r Content-Type n content^ 1 ' text/html ; charset = UTF-B Jr > 

5 <title>K19 - JavaScript</title> 

6 <scr ipt type=" text / javascript ,r src = '" soma . js" ></script> 

7 </head> 
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3 

9 

1C 


<body> 
</body> 
</html> 


Cvdigo HTML 4.21: soma.hunt 


Aiquivo: https://github.com/K10/K19-Exercicio5/archive/k02-javascript-fixacao4S.zip 


Adicione urn arquivo chamado soma js no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


var soma = function Q { 
var soma = 0; 

for(var i = 0; i < arguments.length ; i ++) L 
soma += arguments [i ]; 

} 

return soma; 


var resultado = soma(2,4,5,6,1); 
console.log(resultado); 


CoriigoJavascript 4.62: somn. js 


Arquivo: https://github.com/KlS/KI9-Exercicios/archive/k02-javascript-fixacao49. zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


h 11 p: //loca1host/javascript/public_h tml/soma. html . 

No Ufountu, utilize o Chrome para acessar o endereco: 


h 11 p://loca1host/™<USUAR10>/j avase rip t/public_ h tml/s oma.html. 

Verifique as mensagens exibidas no console do navegador. 


*|P Arrays 


A linguagem Javascript prove urn objeto com caracteristicas semelhantes a uin array. Esse tipo 
de objeto pode ser criado de forma literal com a sintaxe JSON. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 
11 
12 

13 

14 


var vazio = []; 

var cursos = [ IJ KOI p , 17 KG2 ” , w K03 p ]; 

console.log[vazio[0]); 

// undefined 

console.log Ccurses[0]); 

// K.01 

console.log£vazio.length); 

// C 

console.log(cursos.length) ; 

// 3 


338 


www.k19.com.br ■ KIS 












339 


JAVASCRIPT 


Percorrendo um Array 

Para percorrer um array, podemos utilizar o comando for. 


1 

2 

3 

4 

5 


Adicionando Elementos 

Para adicionar um eleinento no final de um array, podemos utilizar a propriedade length. 


1 

2 

3 

4 

5 

6 
7 
3 


Tanibem podemos utilizar o metodo pushQ. 


1 

2 

3 

4 

5 

6 
7 
3 



var cursos = [ " KQ1 V'KQ2 " ] ; 

cursos [ cursos . length] = r 'KG3 rJ ; 

// ["KOI". " K0 2 11 r P K03 ,J J 

for(var i = 0; i < cursos.length; i++) i 
console.log(cu rsos[i]); 

} 


var cursos = [ "K01 "■ f "KQ2" , ''K03" ] ; 

for(var i — 0; i < cursos. length; i++) -[ 
console.log(cu rsos[i]); 

} 


Removendo Elementos 

O metodo delete (} per mite remover elementos de um array. 


1 var cursos = [ rJ KG1 |J , "1(02% "K03"]; 

2 

3 delete cursos[0]; 

4 // [undefined, J| K 0 2 J| , |J K03" ] 

5 

6 for(var i = 0; i < cursos.length; i++) i 

7 console.log(cursos[i]) ; 

3 1 


Concatenando Arrays 

O metodo concatQ per mite coneatenar do is arrays. 


1 var formacaoBasica = [''KOI 1 ' , "KQ2", "KQ3"]; 

2 var formacaoJava = ["KIT", "K12"]; 

3 

4 var formacaoCompleta = formacaoBasica . concat (formacaoJava) ; 

5 U [ ,r K 01 , lr KG2 " , " <03 " , "K11 " , ”K12 r '] 

6 

7 for(var i = 0; i < formacaoCompleta.length; i++) { 

3 console.log(formacaoCompleta[i]); 

9 } 
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Gerando uma String com os Elementos de um Array 


1 

2 

3 

4 

5 

6 


Removendo o Ultimo Elemento 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


Invertendo os Elementos de um Array 

O metodo reverseQ inverte a ordem dos elementos de um array. 


1 

2 

3 

4 

5 

6 
7 
3 


var cursos = ["KOI", ''K02 ,r , "KQ3" 

cursos.reverse(); 

// [ ,r K 0 3 M , " K0 2" t "KOI”] 

for(var i = 0; i < cursos.length; i++) i 
console.log(cursos[i]); 

1 


O metodo pop() remove e retorna o ultimo elemento. 


var cursos = ["KOI™, ''K02' r , "KQ3"]; 

var curso = cursos,pop() ; 

// [ ,r K01\ " K0 2 "I 

console . log( " Elemento removido:: " + curso); 

for(var 1=0; i < cursos . length ; i++) { 
console.log(cursos[i]); 

} 


O metodo joinQ cria uma string a partir de um array. 

var formacaoJava = ["KIT', '‘K12' 1 ]; 

var resultado = formacaoJava,join ( " , * ) ; 

// K1 1 ,K12 

console, log(resultadlo) ; 


Removendo o Primeiro Elemento 

O metodo shiftf) remove e retorna o primeiro elemento de um array. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


var cursos = [ '' KG1 " , "K02" , "KG 3”]; 

var curso = cursos,shift() ; 
if t J ’K02 rt , ”K03 J '] 

console . log ( r ' Elemento removido: f ' +■ curso); 

for(var 1 = 0; i < cursos. length; i++) -[ 
console . log (cu rsos [ i T) ; 

} 


Copiando um Trecho de um Array 

O metodo slice() cria uma copia de uma por^ao de um array 


var cursos = ["K0r\ "K02 11 , r 'K03'\ ''KIT' 1 , " K1 2 " 1; 


340 


www.k19.com.br R KIB 




















341 


JAVASCRIPT 


3 

4 

5 

6 
7 
3 


var formacaoBasica = cursos . slice (0 , 3); 

U ["KOI", K02 " t r, K03 ,J ] 

for(var i = 0; i < formacaoBasica.length; i++) i 
console . log(formacaoBasica[i]); 

} 


Removendo e Adi cion an do Element os em um Array 

O metodo spliceQ permite remover elementos do array e adicionar novos elementos. 


1 

T 

var cursos = [ "K11 r ' 

, "K12 1 '. 

, W K21" t " 

K22" , u K23 N ]; 

L 

3 

cursos,splice (2, 3, 

" K31" . 

, J| K32 J| ) 


4 

// ["Kll", " K1 2 <r , " 

K31 " , ' 

1 K32 lp ] 


D 

6 

for(var i = 0; i < 

cursos. 

.length ; 

i++) t 

7 

console.log(cursos[i]); 



3 

1 





Adicionando um Elemento na PrimeiraPosi^ao 

O metodo uiishiff () adiciona elementos na primeira posigao de um array. 


1 var cursos = [ rJ K1 2 " , " K21 " , " K22 " , " K23 17 ] 

2 

3 cursos . unshi ft ( Jl K 11 "} ; 

4 if [ ,r K 1 1 " , " K 1 2 " , " K21 , ,r K 2 2 J| . " K 2 3 " ] 

5 

6 for(var i = 0; i < cursos.length; i++) f 

7 console.log (cursos[i]); 

3 J 


*# Strings 


Acessando os Caracteres de uma String por Posi^ao 

O metodo charAtQ retorna o caractere na posi^ao especificada. 


1 

2 
3 


Recuperando um Trecho de uma String 

O metodo sliced retorna uma por^ao de uma string. 


1 

2 
3 


Dividindo uma String 

O metodo splitf} cria uma array de strings a partir de um separador. 


var curso = "K12 - Desen volvimertto Web com JSF2 e JPA2"; 
console . log (curso . slice(0,3)} ; 


var curso = "K12"; 

console.log(curso.charAt(0)); 
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1 

2 

3 

4 

5 


var curso = r 'K12 -Desenvolvimercto Web com JSF2 e JPA2" ; 
var aux = curso.split("-"); 

console.log(aux[0]); 
console.log(aux[1]); 



Exercicios de Flxa^ao 


© Adicione urn arquivo chamado array-length,html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 

s 

9 

10 


<!DOCTVPE html> 

< h t m 1 lang = ' r pt-br''> 

<head> 

<meta http-equiv=" Content - Type " content-" text/html ; charset-UTF -8 JI > 
<title>K19 - Java£cript</title> 

<scr ipt type*" text / javascript 11 src^ 1 array - length . js " ></ script> 
</head> 

<body> 

</body> 

</html> 


Cddigo HTML 4.22: army-length, hnni 


Arquivo: https: //github. com/K19/K19-Exercicios/archive/k02- javascript-f ixacaoSl . zip 


@ Adicione um arquivo chamado array-length, js no projeto javascript. 


1 var vazio = []; 

2 var cursos = [ " K11 \"Kl 2" , "K21" , "K22" T "K23™ , "<31 " , K32" ]; 

3 

4 console.log(vazio[0]); 

5 console.log(cursos[0]); 

6 

7 console.log(vazio.length); 

3 console.log(cursos.length); 


Cddigo Javascript 4.79: array-kngth.js 


Arquivo: https://github.com/KIS/KI9-Exercicios/archive/k02-javascript-fixacao52.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 

http://localhost/javascript/publicjitml/array-length.html. 

No UbuntUp utilize o Chrome para acessar o endereco: 

http://loca 1 host/~<USUARl(»/javascript/public_htnil/array-length . html. 

Verifique as mensagens exibidas no console do navegador. 

Q Adicione um arquivo chamado array-elementos.html no projeto javascript. 

1 I < ! DOCTVPE html > 
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2 

3 

4 

5 

6 
7 
3 
9 
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<html lang = ' r pt-br' 1 > 

<head> 

<meta http - equiv = J| Content - Type 13 content- 1 ' text /html ; char set = UTF -8' 1 > 
<title>K19 - JavaScript</title> 

< script type=" text / javascript 11 src = ,r array - element os . js "></script > 

</ hea.d> 

<body> 

</body> 

</html> 


Codigo HTML 4.23: array-elementos. h tml 


ArCflliVO: nttps:yVgithub.com/KlS/KI9-Exercicios/archive/k02-javascript-fixacao54 . zip 


© Adicione um arquivo chamado array-elementosjs no projeto javascript. 


1 var cursos - [ " K11 \ "K12 " , " K21 \ " K22 \ "K23" , "K3 1 " , "K32 " ]; 

2 for(var i = 0; i < cursos . length; i++) i 

3 console.log(cursos[iJ ) ; 

4 } 


Codigo Javascript 4.30: array-elementosjs 


Arquivo: https: //github.com/KIS'/KI9-Exercicios/archive/k02-javascript-fixacao55 . zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http: //.localhost/ javascript/public_html/array-elementos.html. 


No Ubuiitu, utilize o Chrome para acessar o endereqo: 


h 11 p://loca 1 host/~<U5U AR I0>/j avase r i p t /public_ h tml/a r ray-eleme ntos.html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado array-add,html no projeto javascript. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 


< ! DOCTTPE html > 

<html lang = ?l pt-br"> 

<head> 

<meta http-equiv-' 1 Content-Type" content-" text/html j charset=UTF-8" > 
<title>K19 - JavaScript</title> 

< script type = '‘ text / java script Jl src = '‘ array - add . j s ■'></ scri pt > 

</head> 

<body> 

</body> 

</html> 


Codigo HTML 424: array-add.html 


Arquivo: https://github.con/KIS'/K]9-Exercicios/archive/k02-javascript-fixacao57. zip 


© Adicione um arquivo chamado array-add,js no projeto javascript. 


var cursos = [ " KH V'K12" K21'V'K22 "K23 V'K3 l'\ ,J K32 N ] ; 
cursos[cursos.length] = "KOI"; 
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5 

6 
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forCvar i = 0; i < cursos . length; i++) L 
console.log(cu rsos[i]) ; 

} 


Codigo Javascript 4.81: army-add.js 


Arquivo: https: //github. com/KI 9/KT 9-Exercicios/archive/k02-javascript-fixacao58. zip 


© No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/javascript/publicjitml/array-add.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http: //localhost/" j <USllAftIG>/java5cript/public_html/array-add.btml. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado array-push,html no projeto javascript. 


1 <!DGCTTPE html> 

2 <html lang = ''pt-br''> 

3 <head> 

4 <meta http-equiv = JI Content-Type" content^” text/html ; charset=UTF-B" > 

5 <title>K19 - JavaScript</title> 

6 <script type = ,r text/javascript" src = " array -push . js "></ script> 

7 </head> 

3 <body> 

9 </body> 

10 </html> 


Codigo HTML 4.25: array-pushJiftn! 


Arquivo: https://github.com/KlS/KI9-Exercicios/archive/k02-javascript-fixacao60.zip 


© Adicione um arquivo chamado array-push,)s no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 


Arquivo: https://github.com/KIS/KI9-Exercicios/archive/k02-javascript-fixacaoGl.zip 


var cursos = [ r ' KIT \ ”K12 11 , "K21 " t " K22 \ "K23 " , "K3 1 " , " K32 " ]; 
cursos.push{ "KOI " ) ; 

for(var i = 0; i < cursos.length ; i++) i 
console.log(cursos[i]) ; 

J_ 

Codigo Javascript 4.82: army-pitsk.js 


© No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/javascript/pub.lic_htinl/array-push. html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 
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h 11 p ://loca 1 host /~< USU Afi IO>/j av asc r ip t/ publ i c_ h tml / a rray- pu s h . h tml . 


Verifique as mensagens exibidas no console do navegador. 


@ Adicione um arquivo chamado array-concat.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


< ! DOCTYPE h trail > 

<html lang = ,r pt-br' r > 

<head> 

<meta http -equiv="Content-Type" content^ 1 2 3 4 5 6 7 * 9 ' test/html ; char set = UTF-8 JI > 
<title>K19 - Java5cript</title> 

<scr ipt ty pe = ' r text / javascript M src = ’" array-cone at . js " ></ scr ipt> 
</head> 

<body> 

</body> 

</html> 


Codigo HTML 4.26: array-concat.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/kG2-javascript-fixacao63. zip 


Q Adicione um arquivo chamado array-concat.js no projeto javascript. 


1 var formacaoJava = [ "K11" , w K12" ]; 

2 var formacaoJavaAvancado = [ ”K21" > "K22"™K23" ]; 

3 

4 var formacaoCompleta = formacaoJava . concat(formacaoJavaAvancado) ; 

5 

6 for(var i = 0; i < formacaoCompleta.length; i++) L 

7 console.log(formacaoCompleta[i]); 

S 1 


Codigo javascript 4.83: array-concat.js 


Arquivo: https://eithub.com/KIS/KI9-Exercicios/archive/k02-javascript-fixacao64.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/array-concat . html. 


No Ufountu, utilize o Chrome para acessar o endereqo: 


h 11p : //loca 1 h ost/USUARIO>/j avase rip t /public_ h tml/a rray- conca t.h t ml . 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado array-pop.html no projeto javascript. 


1 <!DOCTYPE html> 

2 <html lang = ?l pt - br' 1 > 

3 <head> 

4 <meta http-equiv = ! " Content-Type" content^” text/html; charset=UTF-8" > 

5 <title>K19 - JavaScript</title> 

6 <script type = JI text/ javascript’" src=" array-pop . js 17 ></scri pt > 

7 </head> 

3 <body> 

9 </body> 
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10 |</html> _ 

Codigo HTML 4.27: array-pop Jit ml 


Atquiuo: https: /7github,com/K19/K19-Exercicios/archive/k02-javascript-fixacao66. zip 


© Adicione um arquivo chamado array-pop.js no projeto javascript. 


1 

2 

3 

4 

5 


Arquivo: https://github,com/K19/K19-Exercicios/arehive/k02-javascript-fixacao67.zip 


var cursos = ["Kll " :f "K12", "K21 " , "K22" , n K23"]; 
var curse = cursos.pop(); 
console.log(curso) ; 

Codigo javascript 4.84: array-pop.js 


© No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/array-pop,html. 


No Ufountu, utilize o Chrome para acessar o endereqo: 


h 11 p:/ /lo ca 1host /~<U5U AR IO> / javase r i pt/publi c_ h tml/ a rray-pop . h tml . 


Verifiqne as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado array-reverse.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 


<!DOCT YPE html> 

<html lang = ' , pt-br' l > 

<head> 

<meta http-equiv = J| Content-Type" content-" text/htjni ; charset=UTF-G " > 
<title>K19 - JavaScript</title> 

<scr ipt type = '‘ text / javascript Jl sre-" array-reverse . js "></ scri pt > 
</head> 

<body> 

</body> 

</html> 


Codigo HTML 4.28: army-inverse.html 


Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-javascript-fixacao69.zip 


© Adicione um arquivo chamado arr ay-reverse* js no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 


var cursos = ["K1 1 \ "K12\ "K21 \ "K22\ "*23"]; 
cursos. reverse () ; 

for(var i = 0; i < cursos . length; i++) { 
console.log(cursos[i]) ; 

}_ 

Codigo Javascript 4.85: array-reverseAs 
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Ai'CfUiUO: https://github.com/K19/KT9-Exercicios/archive/k02-javascript-fixacao7G. zip 




No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/publicjntnl/array-reverse.html. 

No XJbuntu, utilize o Chrome para acessar o endereqo: 


http://localhost/~<USUARIO>/j avasc ript/public_ h tml/a rray-re ve rse.html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione urn arquivo chamado array-shift.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

TO 


<!DGCTYPE html> 

<html lang = Jr pt-br ,r > 

<h.ead> 

<meta http-equiv = J| Content-Type" content=" text/html ; charset=UTF-B J| > 
<title>K19 - Java5cript</title> 

<script type -"text/javascript " src= "array-shift.js w ></script? 
</head> 

<body> 

</body> 

</html> 


Cddigo HTML 429: array-shift.html 


Arquivo: https://github. cosn/KIS/KI9-Exercicios/archive/k02-javascript-fixacao72, zip 


@ Adicione uin arquivo chamado array-shift js no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
S 
9 


Arquivo: https://github.com/K19/KT9-Exercicios/archive/k02-javascript-fixacao73.zip 


^ No Windows, utilize o Chrome para acessar o endere^o: 

http://localhost/javascript/public_html/array-shift . html. 

No Ubuntu, utilize o Chrome para acessar o endereco: 

http: //localhost/^USUARIO/javascript/publicJltml/array-shift , html. 

Verifique as mensagens exibidas no console do navegador. 


var cursos = [ "KIT \ " K12 ", "K2T" ," K22" t "K23" ]; 

var curse = cursos.shift() ; 

console . log C'''E lemen to removido: " + curso); 

for[var i = 0; i < cursos.length; i++) f 
console.log(cu rsos[i]) ; 

1_ 

Cddigo Javascript 4.86: array-shifijs 
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© Adicione um arquivo chamado array-slice,html no projeto javascript. 


1 <!DOCTYPE html> 

2 <html lang = '' pt -br > 

3 <head> 

4 <meta http -equiv = ir Content-Type w content- 1 ' text/html ; charset=UTF-8" > 

5 <title>K19 - JavaScript </ title> 

6 <script type = " text/javascript w src = J| array-slice . js "-></sc ri pt> 

7 </head> 

3 <body> 

3 </body> 

10 </h tml> 


Cddigo HTML 4.30: array-sticeJitml 


Arquivo: https://github.com/K19/K13-Exercicios/archive/k02-javascript-fixacao75. zip 


@ Adicione um arquivo chamado array-slice.js no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 


Arquivo: https://github.com/K19/K13-Exercicios/archive/k02-javascript-fixacao76.zip 


var cursos = [ "K11" , MCI 2" , "K21" , "K22 \ "K23" ]; 

var formacaoJava = cursos . siice(0 r 2) ; 

for(var i = 0; i < formacaoJava,length; i++) { 
console.log(formacaoJava[i]); 

J_ 

Cddigo Javascript 4.37: army-slke.js 


No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/javascript/public_htinl/array-slice. html. 

No Ubuntu, utilize o Chrome para acessar o endereqo: 


h 11p://loca 1 host/~<U5U ARIO>/javaseript/public_ h tml/a rray-slice.html. 


Verifique as mensagens exibidas no console do navegador. 


© Adicione um arquivo chamado array-unshift.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 


<!DOCTYPE html> 

<html lang = ,r pt-br' r > 

<head> 

<meta http-equiv-' 1 Content-Type " content^ 1 ' text/html ; charse t=UTF -S JI > 
<title>K1S - Java5cript</title> 

<scr ipt type = ' r text/ javascript " src = '‘ array -unsh if t . js "></ script> 
</head> 

<body> 

</body> 

</html> 


Cddigo HTML 4.31: array-wish ift.h tm 1 


Arquivo: https://github.com/K19/K13-Exercicios/archive/k02-javascript-fixacao78 . zip 
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^ Adicione um arquivo chamado array-unshift,js no projeto javascript. 


1 var cursos = [ ” K1 2 \ " K21\ " K22 \ " K23 " ]; 

2 

3 cursos . unshi ft ('■ K 1 1 "} ; 

4 

5 for(var i = 0; i < cursos,length; i++) i 

6 console,log(cursos[i]) ; 

1 } 


Codigo Javascript4.88: array-unshift.js 


Arquivo: https://github.com/K!97K19-Exercicios/archive/k02-javascript-fixacao79.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascri.pt/public_htinl/array-ijnshift .html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/ ni <USUARIO>/javascript/public_htnl/array-unshi ft, html. 

Verlfique as mensagens exibidas no console do navegador. 


0 


Adicione um arquivo chamado array-split.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 


<IDOCTVPE html> 

<html lansg="pt-br' r > 

<head> 

<meta http-equiv = ,r Content-Type" content^ 1 ' text/html. ; char set = UTF-8 J| > 
<title>K19 - JavaScript</title> 

<script type=" text/javascript Jl src^ 1 array - split. js r< x/script> 

</head> 

<body> 

</body> 

</titml > 


Codigo HTML 4.32: array-split.html 


Arquivo: https://github, com/K19/K19-Exercicios/archive/k02- javascript-fixacaoSI . zip 


0 


Adicione um arquivo chamado array-split .js no projeto javascript. 


1 

2 

3 

4 

5 


var curso = "K12-Desenvolvimento Web conn JSF2 e JPA2" ; 
var aux = curso , spi i t ( " - ™ ) ; 

console,log(aux[Q]); 
console.log Caux [ 1 ]) ; 


Codigo Jamscnpt 4.83: anay-split.js 


Arquivo: https://github,com/K;9/K19-Exercicios/archive/k02-javascript-fixacao82,zip 


@ No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/javascript /public_html/array- split, html. 
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No Ubunfu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/javascript/public_html/array-split . html. 

Verifique as mensagens exibidas no console do navegador. 


DOM - Document Object Model 


Os documentos HTML assim conio os seus elementos sao representados por objetos JavaScript. 
Podemos acessar o objeto que representa o documento HTML atual atraves da variavel document. 
Os objetos que representam os elementos do documento HTML atual podem ser acessados atraves 
dessa variavel. 

Recuperando elementos 


• Podemos buscar elementos HTML por ID atraves do metodo getElementByld. Esse me tod o 
devolve null se nao existir elemento HTML com o identlficador desejado. 


1 Ivar elemento = document. getElementById( 11 conteudo ") ; 


* Podemos buscar elementos HTML pelo valor do atributo name atraves do metodo getEle- 
mentsByName. Esse metodo devolve um array com os elementos recuperados. 


1 var array = document . getElement sByMame('■ categoria '■ ) ; 


* Podemos buscar elementos HTML de um determinado tipo atraves do metodo getElementsBy- 
TagName. Esse metodo devolve um array com os elementos recuperados. 


1 var array = document . getElementsByTagName {"p 11 ) ; 


* Podemos buscar elementos HTML pelo valor do atributo class atraves do metodo getElement sBy- 
ClassName. Esse metodo devolve um array com os elementos recuperados. 


1 var array = document.getElementsByClassName(" confirmado "); 


* Podemos buscar elementos HTML utilizando seletores CSS atraves dos metodos querySelec- 
tor e querySelectorAll. O primeiro metodo devolve o primeiro elemento compativel com o 
seletor CSS passado corno parametro, O segundo metodo devolve um array com todos os ele¬ 
mentos compativeis com o seletor CSS passado como parametro. 


1 var elemento = document.querySelector div.aprovado "}; 

2 var array = document.querySelectorAl1( u div,aprovado"} ; 


♦ Podemos acessar os atributos de um elemento HTML atraves do metodo getAttribute. Esse 
metodo recebe corno parametro o nome do atributo desejado e devolve null ou “"(string vazia) 
se o atributo nao existir. 


1 var valor = elemento . get Att r ibute ( H type J| } ; 


* Tambem podemos acessar os atributos de um elemento HTML atraves da propriedade attri¬ 
butes. 
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1 for(var 1=0; i < elemento.attributes.length - 1 ; i++) { 

2 console . log(elemento . attributes[i]. name +■ " = " +■ elemento.attributes[i].value); 

3 } 


♦ Podemos acessar o conteudo de um elemento HTML atraves da propriedade innerHTML, Essa 
propriedade armazena o conteudo dos elementos HTML em forma de string. 


1 var conteudo = elemento. innerHTML; 


Alterando elementos 

* Podemos modificar os atributos de um elemento HTML atraves do metodo setAttribute. 

1 elemento . set At tr ibute (" type Jl , "text' 1 ); ■ 

* Podemos modificar o estilo de um elemento HTML atraves da propriedade style. 

1 | elemento . style . color = ''red' 1 ; j 

As propriedades com nome composto devern seguir a convengao Camel Case. 

1 elemento.style.borderColor = "red"; ; 

* Podemos modificar o conteudo de um elemento HTML atraves da propriedade innerHTML. 

1 I elemento , innerHTML = "Acesse <a href = ’ http ;//www . kl 9 . com , br r >K1 3 </a> 11 ; ' 


Removendo elementos 


* Podemos remover um elemento HTML atraves do metodo remove. 


1 var elemento = document. getElement By I d (" conteudo IJ ) ; 

2 elemento . remove () ; 


* Podemos remover um elemento HTML atraves do seu pal. 


1 var elemento = document.getElementById(" conteudo" ); 

2 elemento,parentNode.removeChild(elemento); 


Adicionando elementos 


* Podemos criar um elemento HTML atraves do metodo createEiement e adiciona-lo em um 
documento HTML atraves do metodo appendChild. 


1 var titulo = document. ere a teEle men t ( |! h 1 J| ) ; 

2 titulo.innerHTML = "K19 Treiname n tos" ; 

3 var elemento = document.getElementById(" conteudo" ); 

4 elemento.appendChiId(titulo); 


* Tambem podemos adicionar um elemento HTML em um documento HTML atraves do me¬ 
todo InsertBefore. 
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1 var titulo = document. ere a teElement (" h 1 ") ; 

2 titulo . i nnerHTML = "Cursos K13 r '; 

3 

4 var conteudo = document. getEiement By I d (" conteudo ; 

5 var tabela = conteudo . getElementById(" tabela-de-cursos H ) ; 

6 

7 conteudo , insertBefore {titulo , tabela); 


Mais Sobre 

Os objetos que representam os documentos e os elementos HTML possuem uma 
grande quantidade de propriedades e metodos. Para saber mais sobre essas proprie- 
dade e esses metodos, recomendamos a consulta aos seguintes endere^os: 


• https://developer.mozilla.org/en-US/docs/Web/API/Document 

* https://developer.mozilla.org/en-US/docs/Web/API/element 



Exercicios de Flxa^ao 


© Adicione um arquivo chamado DOM, html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 


<!DGCTYPE html> 

<html lang = ' r pt-br' 1 > 

<head> 

<meta http-equiv = ’ r Content-Type" content^ text/html . ; char set = UTF -8 JI > 
<title>K1S - Java5cript<7title> 

</ head> 

<body> 

<hl id = "titulo n ‘ class= "centralizado " >K19 - JavaScript</h 1 > 

<form id = ‘" formulario H action = "#"> 

<label for-" esporte ">Esporte : </label> 

<input id= " esporte r ' type = ' r checkbox l * name = '" categor ia n > 

<label for = ''politica">Folitica: </label> 

<input id = " poli tica ir type =" checkbox Jr name=" categoria B > 

<label for- pr economia ''>Economia : </label> 

< input Ld = " economia ,r type=" checkbox 1,1 name=" categoria "> 

<label for-" entretenimento '>Entreterimento: </label> 

<input id= r ' ent reteniinento" type = "checkbox ?r name = rp categoria 11 > 
</form> 

<script type = ' r text/ javascript " sre-' 1 DOM . js "></script> 

</body> 

</html> 


Codigo HTML 4.33: DOM html 


Arquivo: https : //github. com/K19/K19-Exercicios/archive/kQ2-javascript-f ixacao£4. zip 


a Adicione um arquivo chamado DOM,js no projeto javascript. 
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1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 


var titulo = document.getElementById(" titulo ") ; 
console.log(titulo.tagName + ": " + titulo. innerHTML); 

var array = document . getElement s&yMame( J| categoria ") ; 
for(var 1=0; i < array.length; i++) { 

console . log (array [i ] . tagName + ,r : " + array[iI,id); 

} 

array = document. getElementsByTagName ( "label ; 
for(var 1=0; i < array.length; I++) { 

console . log (array [1], tagName + Jl : " + array [11, get Attribute ( M for ")) ; 

} 

array = document . getElementsByClassName ( IJ centralizado ") ; 
for(var 1=0; i < array.length; i++) { 

console,log(array[ij.tagName + ": " +■ array[11,id); 

1 

var formulario = document. query Selector ( |J body > form'' ) ; 

console,log(formulario.tagName + " + f ormulario . get Attribute ( " action Jl ) ) ; 

array = document . querySelectorAl 1 {" label ") ; 
for(var i = 0; i < array.length; i++) { 

console , log (array [i ] . tagName + ” i " + ar ray [ i 1. get At t ribute ( " f or" )) ; 

1 


Codigo javascript 4.106: DOM.js 


Arquivo: https://github.com/MS/KI9-Exercicios/archive/k02-javascript-fixacaoSS.zip 


© No Windows, utilize o Chrome para acessar o endere^o: 

http://localhost/javascripi/public_htnl/DOM,html. 

No Ubuntu, utilize o Chrome para acessar o endereco: 

http://localhost/~<USUARI0>/java5cript/public_html/D0M.html. 

Verifique as mensagens exibidas no console do navegador. 


© No console do navegador, execute os seguintes comandos um de cada vez e observe o resultado. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 


var titulo = document. getEl ement By Id ( J| t itulo u ) ; 
titulo.style.color = "red"; 

titulo, innerHTML = "K19 - JavaScript - DOM 1 '; 
titulo . remove () ; 

var body = document, query Selector ( |J body ; 

var form = document. getElementById ( " formulari o |J ) ; 

body.insertBefore(titulo f form); 


Eventos 
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A interatividade entres as paginas web e os usuarios depende fortemente dos eventos que podem 
ser reconhecidos pelos navegadores. Por exemplo, atualmente, os navegadores sao capazes de iden- 
tificar o movimento do mouse, a digita^ao do usuario, a finalizagao do carregarnento de uina p agin a 
web, o redim ensionamento da janela, entre outros eventos. 

Ha uma quantidade muito grande de eventos que podem ser reconhecidos pelos navegadores. 
Recomendamos que voce consulte os seguintes enderegos para obter maiores informa^oes; 

* http://www.w3.org/TR/D0M-Level-3-Events/ 

* http://en.wikipedia.org/wiki/DOM_events 


Podemos definir o que deve ocorrer quando um determinado evento e detectado. No exemplo 
abaixo, toda vez que o usuario clicar no paragrafo, a mensagem “K19” sera exibida no console do 
navegador. 

1 <p onclick = ?r console . log ( F K1 9 ' ) "> 

2 Loren ipsum dolor sit amet, consectetur adipiscing elit. 

3 </p> 


load 

O evento load e disparado no termino do carregarnento de um recurso [imagem, script, folhas de 
estilos, entre outros) contido em um documento HTML oil do propria documento, Podemos definir 
o tratamento desse evento utilizando o atributo onload. Esse atrlbuto pode ser utilizado em divers os 
elementos HTML. Por exemplo: body, img, script e link, 

1 <body onload = " console . lo^( F K1 9 

2 </body> 


resize 


O evento resize e dispar ado quando ocorre uma alter aqao no tamanho de determinado s elemen¬ 
tos. Podemos definir o tratamento desse evento utilizando o atributo onresize. Esse atributo pode 
ser utilizado em diversos elementos HTML. Por exemplo: body, img, form e textarea. 

1 <body onres i z:e = ' r console . log £' K1 9 ' ) "> 

2 </body> 


scroll 

O evento scroll e disparado quando a barra de rolagem de um determinado elemento HTML e 
movida, Podemos definir o tratamento desse evento utilizando o atributo onscroll. Esse atributo 
pode ser utilizado em diversos elementos HTML. Por exemplo: body, section, div e textarea. 

1 <body onscroll = ' r console . log ( F K1 9') "> 

2 </body> 


focus 

O evento focus e disparado quando um determinado elemento ganha o foco. Podemos definir o 
tratamento desse evento utilizando o atributo onfocus. Esse atributo pode ser utilizado em diversos 
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elementos HTML. Por exemplo: input, select e textarea. 


1 < input on focus = console . log £ r 9 r ) " . ..> 


change 

O evento change e disparado quando um determinado elemento HTML perde o foco apos ter o 
seu conteudo alterado. Podemos definir o tratamento desse evento utilizando o atributo onchange. 
Esse atributo pode ser utiiizado em diversos elementos HTML. Por exemplo: input, select e textarea. 

1 <input onchange=" console . log(’K19 1 )" j 


blur 

O evento blur e disparado quando um determinado elemento perde o foco. Podemos definir o 
tratamento desse evento utilizando o atributo onblur. Esse atributo pode ser utiiizado em diversos 
elementos HTML. Por exemplo: input, select e textarea, 

1 I< input onblur = "console . log ( J K19 ■' ) " TTT> 


select 

O evento select e disparado quando o texto contido em um input ou textarea e selecionado. 
Podemos definir o tratamento desse evento utilizando o atributo onselect. 


1 < input onselect = " console . log (’K1S 1 ) " ... > 


submit 

O evento submit e disparado imediatamente antes do envio de um formulario, Podemos definir 
o tratamento desse evento utilizando o atributo onsubmit. 


1 <forri onsubmit console . log t r &T 9 ') r ' ...> 


reset 

O evento reset e disparado quando um formulario e reiniciado. Podemos definir o tratamento 
desse evento utilizando o atributo onreset. 


1 <form on resets" console . log(’K19')" . . . > 


mousedown, mouseup e click 

Os eventos mousedown, mouseup e click estao relacionados ao ato de clicar nos elementos 
HTML com o botao esquerdo ou com o botao do rneio do mouse, Podemos definir o tratamento 
desses eventos utilizando os atributos onmousedown, onmouseup e onclick. Esses atributos po- 
dem ser utilizados em diversos elementos HTML. Por exemplo: p, div, table e img. Esses eventos 
ocorrem na seguinte ordem: 
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1. mousedown 

2. mouseup 

3. click 


1 <p onmousedown^" console . log ( 5 1 3 ) w 

2 omjiouseup = ” console . log ( f 2 f } Hr 

3 onelick = " console . log (' 3 '} ,r > 

4 Loren ipsun dolor sit amet , consectetur adipiscing elit. 

5 </p> 


dblclick 


O evento dblclick e disparado quando uni determinado elemento recebe um duplo clique. Po- 
demos definir o tratamento desse evento utilizando o atributo ondtoleliek, Esse atributo pode ser 
utilizado em diversos elementos HTML, Por exemplo: p, div, table e img. 

1 <p ondblclick=" console „ log( 1 K19 3 ) w > 

2 Loren ipsun dolor sit amet, consectetur adipiscing elit. 

3 </p> 


mo use move 


O evento mousemove e disparado quando o usuario movimenta o mouse sobre um determinado 
elemento. Podemos definir o tratamento desse evento utilizando o atributo oimiousemove. Esse 
atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img, 

1 <p onnouseriove = ,r con5ole . log( r K1 9 ') "> 

2 Loren ipsun dolor sit amet, consectetur adipiscing elit. 

3 </p> 


mouveover 

O evento mouveover e disparado quando o ponteiro do mouse pass a a estar sobre um deter - 
minado elemento. Podemos definir o tratamento desse evento utilizando o atributo Giimouveover. 
Esse atributo pode ser utilizado em diversos elementos HTML. Por exemplo: p, div, table e img, 

1 <p onnouveover = "console.log£ r K19 ') "> 

2 Loren ipsun dolor sit amet, consectetur adipiscing elit. 

3 </p> 


mouseout 


O evento mouseout e disparado quando o ponteiro do mouse deixa de estar sobre um determi¬ 
nado elemento. Podemos definir o tratamento desse evento utilizando o atributo onmouseout. Esse 
atributo pode ser utilizado em diversos elementos HTML. Por exemplo: div, table e img, 

1 <p onmouseout= 11 console . log (’ K19 1 )" > 

2 Loren ipsun dolor sit amet,. consectetur adipiscing elit, 

3 </p> 
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key down, keypress e keynp 

Os event os keydown, keypress e keyup estao relacionados ao ato de pressionar uma tecla quando 
o foco esta em um determinado elemento HTML, Podemos definir o tratamento desses eventos uti- 
Hzando os atributos onkeydown, onkeypress e onkeyup. Esses atributos podem ser utilizados em 
di versos elementos HTML. Por exempio: input e textarea. Esses eventos ocorrem na seguinte ordem: 


1. keydown 

2. keypress 

3. keyup 


1 <input 

2 orckeydown = " console . log ( f 1 "} J| 

3 onkeypress = '" console . log (' 2 1 )" 

4 onkeyup= H console , log { F 3 ') Jr 



Mais Sobre 

O event o keypress nao e dispar ado para t eel as que nao representam caracteres. Por 
exempio, SHIFT, CTRL ALT, entre outros. 


M^todos: addEventListener e removeEventListener 

Podemos definir o tratamento dos eventos pro gram aticamente atraves do metodo addEventLis- 
tener. O primeiro parametro desse metodo e o nome do evento que desejamos tratar. O segundo 
parametro e afungao que tratara o evento. 

1 

2 

3 

4 

5 

6 


function clickQ i 

console . log ( "click IJ ) ; 

var elemento = document. getElement By I d ( "conteudo" ) ; 
elemento.addEventilstener( "click" , click); 


Ness a abordagem, podemos associar diver sas fun goes para tratar um determinado evento para 
um determinado elemento HTML. 

Tambem podemos utilizar fungoes anonimas como mostra o exempio a seguir. 


1 var elemento = document,getElementById(" conteudo" ); 

2 elemento,addEventlistener( 

3 "click", 

4 functionQ f 

5 console . log('' cl i ck IJ ) 

6 } 
i ); 


Podemos remover um listener com o metodo removeEventListener. 


1 elemento.removeEventListener(" click " , click); 


O metodo removeEventListener nao pode ser utilizado para fungoes anonimas. 
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Propriedades dos objetos do DOM 

Outra forma de definir programaticamente o tratamento dos eventos e utilizar as propriedades 
de evento dos objetos que representam os elementos HTML, Veja o exemplo a seguir. 

1 

2 

3 

4 


var elemento = document.getElementById( "conteudo" ); 
elemento,onclick = functionQ { 
console . log ( 11 click " ) 

); 


Nessa abordagem, apenas urna furiqao pode ser associada a um determinado evento para um 
determmado elemento HTML. 

Exercicios de Fixa^ao 


© Adicione um arquivo chamado eventos.html no projeto javascript. 



1 

<!DOCTfPE html> 

2 

<html lang = ' r pt -br "> 

3 

<head> 

4 

<imeta http-equiv=" Content-Type H content^ 1 ' test/htjnl ; charset=UTF-8 J| > 

5 

<title>K19 - JavaScript </ title> 

6 

cscript type=" text / javascript" src^ 1 event os . js ">< / scri pt > 

7 

<style> 

3 

body i 

9 

width: 2000px; 

10 

height: 200£}px; 

11 

12 

> 

13 

div { 

14 

width: 200px; 

15 

height: 200 px; 

16 

background-color: yellow; 

17 

> 

IS 

</ style> 

19 

</head> 

20 

<body onresize = " resize() IJ onscrolI = J| scroll () ”> 

21 

<form> 

22 

< lab el f or = JI campo - nome ">Nome : </ label > 

23 

< input id= 11 campo - nome Jl type = " text J| > 

24 

25 

</form> 

26 

<div></div> 

27 

</body> 

2S 

</html> 


Cddigo HTML 4S0: eventos.html 


Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-javascript-fixacaoSS.zip 


© Adicione um arquivo chamado eventos.js no projeto javascript. 


1 window.onload = function (event} { 

2 console.log{ "documento carregado" ); 

3 

4 var input = document . getElementById ( 17 campo - nonte Jl ) ; 

5 

6 input.onfocus = functionQ f 

7 console . log(" focus IJ ) ; 
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3 

9 

10 

11 

12 

13 

14 

15 

16 

17 
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20 

21 
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26 
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33 
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33 
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41 
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}; 

input. addE vent List ener ( 11 change" , function () { 
console . log ( " change 1,1 ) ; 

}); 

input.onblur = function () { 
console.log C' blur" }; 

}; 

input.onselect = functionQ { 
console.log( "select "); 

}; 

input.onkeydown = function() f 
console.log( H keydown" ); 

}; 

input.onkeypress = functionQ { 
console . log keypress 'Q ; 

}; 

input. onkeyup = functionQ i 
console , log ( " key up H ) ; 

}; 

var div = document . querySelector ( Jl div ") ; 

div . onmousedown = functionQ { 
console . log( " mousedown" ) ; 

}; 

div . onmouseup = functionQ { 
console . log (" mouseup" ) ; 

}; 

div,onclick = functionQ { 
console.log( "click ") ; 

}; 

di v . ondblcl ick = functionQ { 
console . log( p dblclick ■") ; 

}; 

div.onmousemove = function(event} { 
var x = event.clientX; 
var y = event.clientY; 

console . log ( " mo use move : ( ,r + x + ", " + y + 

}; 

div . onmouseover = functionQ { 
console . logQ mouseover" ) ; 

}; 

div. onmouseout = functionQ { 
console.log C' mouseout" }; 

}; 


function resize Q { 

var w = window.outerWidth; 
var h = window.outerHeight; 

console . log( IJ resize (" + w + " , " + h + ") ; 


function scrollQ { 

var x = window , pageXOffset; 
var y = window . pageYOffset; 
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73 

79 


console . log ( 1,1 scroll (" + x + " 3 " + y + ,f }' r ); 

} 


Codigo Javascript 4.112: eventos.p 


Al'quiuo: https://github.com/KIS/Kl9-Exercicios/archive/kQ2-javascript-fixacao89 . zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_htinl/eventos.html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


h 11 p://loca1host/USU ARI0>/javascript/publi c_ h tml/even tos . h1ml . 


Verifiqiie as mensagens exibidas no console do navegador. 


Web Storage 


Podemos armazenar dados nos navegadores dos usuarios atraves do Web Storage. Ha dims for¬ 
mas de armazenamento. 


Local storage: Os dados sao armazenados nos navegadores indefinidamente. Podemos recuperar 
esses dados mesmo apos o fechamento de uma aba ou da janela do navegador. 

Session storage: Os dados armazenados nos navegadores sao descartados apos o fechamento de 
uma aba ou do navegador. 


Os dados armazenados com a API do Web Storage sao separados por domlnio e nao sao compar- 
tilhados entre navegadores diferentes. Os navegadores podem determinar a quantidade de espago 
de armazenamento dispomveL Por padrao, esse espago deve ser de pelo nienos 5MB por dominio. 


Armazenando dados 

O metodo setltem dos objetos locaiStorage e sessionStorage e utilizado para inserir dados no 
Web Storage. Esse metodo recebe dois parametros, uma chave e o um valor. 

1 locaiStorage . setlt em{ "usuario " , "Rafael Cosentino' 1 ) ; 

2 sessionStorage , setltem( J| us.uario" , "Rafael Cosenlino"); 


No exernplo abaixo, mostramos outra forma de armazenar dados no Web Storage. 


1 locaiStorage.usuario = "Rafael Cosentino"; 

2 sessionStorage.usuario = "Rafael Cosentino"; 


Recuperando dados 

O metodo getltem dos objetos locaiStorage e sessionStorage e utilizado para recuperar dados 
do Web Storage. Esse metodo recebe uma chave como parametro. 
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1 usuario = localStorage.getltem( "usuario ") ; 

2 usuario = sessionStorage,getltem(" usuario"); 


No exemplo abaixo, mostramos outra forma de recuperar dados do Web Storage. 


1 usuario = 1oca IStorage.usuario; 

2 usuario = sessionStorage.usuario ; 


Podemos percorrer todas as entradas do localStorage ou do sessionStorage da seguinte forma: 


1 

for(var i = 0; i < localStorage. length; i++) -[ 

2 

var key = localStorage,key(i); 

3 

var value = localStorage.getltem(key}; 

4 

5 

1 

6 

for(var i = 0; i < sessionStorage.length; i++) f 

7 

var key = sessionStorage,key(i); 

8 

var value = sessionStorage.getltem(key); 

9 

} 


Removendo dados 

O metodo remove Item dos objetos localStorage e sessionStorage e utilizado para remover dados 
do Web Storage. Esse metodo recebe uma chave como parametro. 

1 localStorage. remove I ten ("usuario") ; 

2 sessionStorage. remove! tetn{"usuario n ) ; 


Para remover todas as entradas do localStorage ou do sessionStorage, podemos utilizar o me¬ 
todo clear. 


1 localStorage . clear () ; 

2 sessionStorage.clear(); 



Exercicios de Fixa^ao 


0 Adicione um arquivo chamado web-storage.html no pro jet o Javascript, 


1 <! DOCT YPE htffll> 

2 <html lang = "pt-br" > 

3 <head> 

4 <meta http-equiv = ,r Content-Type" content^" text/tit ml ; charset=UTF-B" > 

5 <title>K19 - Web Storage</title> 

6 <script src=" web-storage .jsT></script> 

7 </head> 

S <body> 

9 <h1>K19 - Web 5torage</h1> 

10 <p id = "saudacao Jl ></p> 

11 <label for = "campoNome" >Nonte : </label> 

12 <input id = "campoNome" type = JI text "> 

13 <button id = J| botaoEnviar 1 11 >Enviar</button> 

14 <button id = J| botaolimpar " >Limpar</button> 

15 </body> 

16 </html > 
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Codigo HTML 4.51: web-storage.htn11 


Arquivo: https: //github. eom/KiS/KI9-Exercicios/archive/k02-javascript-f ixacaoS I . zip 


© Adicione um arquivo chamado web-storage ,js no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 


function atualizaSaudacaoQ { 

var saudacao = document,getElementByld(" saudacao Q ; 
if (localStorage.nome) { 

saudacao.innerHTML = Jl 0la " + localStorage,nome; 

} else L 

saudacao.innerHTML = null; 

1 


window. onload = functionQ f 

var botaoEnviar = document.getElementByld( "botaoEnviar” ); 

botaoEnviar . onclick = functionQ f 

var campoNome = document. getElementByld ( [J campoNome Q ; 
localStorage.nome = campoNome.value ; 
atualizaSaudacaoQ ; 

}; 

var botaoLimpar = document, getElementByld (" botaoLimpar 1,1 ) ; 

botaoLimpar . onclick = functionQ { 
localStorage.removeltern C ”nome " }; 
atualizaSaudacaoQ; 

}; 

atualizaSaudacao() ; 

}; 


Codigo javascript 4.120: web-storage.js 


Arquivo: https://github. cofn/K^S/KI9-Exercicios/archive/k02-javascript-fixacao92. zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_h tml/web-s to r a ge . bt m 1 . 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/'< U5U AR IO>/javascript/publi c_ h tml/web-st o rage . h t ml . 


Preencha o formulario. Abra e feche a janela do navegador. 


History 


Podemos avancar ou retroceder no historico dos navegadores atraves do objeto history. Esse 
objeto pode ser acessado atraves do objeto window, 

Avan^ando ou retro cedendo 

Podemos avangar ou retroceder uma pagina no historico atraves dos metodos forward e back 
re sp ecti vamente. 
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1 window . history . forward{) ; 


1 window . history . back () ; 


Tambem podemos utilizar o metodo go. Esse metodo recebe uni numero inteiro como parame- 
tro. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 


// avan^a Lima pagina 
window , history , go( 1 ) ; 

// retrocede uma pagina 
window.history.go (-1); 

// avanga tres paginas 
window.history.go(3); 

If retrocede tres paginas 
window , history , go(-3) ; 


A quantidade de paginas no historico pode ser obtida atraves da propriedade length. 


1 var numeroDePaginasDoHistorico = window . history,length; 


Adicionando ou modificando entradas do historico 

Atraves do metodo pushState, podemos adicionar uma entrada na posicao atual do historico. 
Com o metodo repIaeeState, podemos modificar a entrada atual do historico. Esses dois metodos 
recebem os mesmos parametros. 

1 pushState(stateObject ( title f url); 


1 replaceState(stateObject r title, url); 


stateObject: Um objeto que pode ser utilizado para armazenar informagoes sobre a nova entrada. 
title: O titulo da nova entrada. 
url: A URL da nova entrada. 


Como exemplo, considere que a pagina correspondente a URL mm . kl 9 . com. br esteja sendo exb 
bida no navegador. 

1 var state = { info: "info'" }j 

2 window . history , pushState (state , "K19 - Cursos", " cursos J| } ; 


O codigo acima adicionaria uma nova entrada com titulo “K19 - Cursos” e URL www, kl 9. com.br/ 
cursos. Ja o codigo abaixo, substituiria a entrada atual do historico por uma nova com titulo 4i K19 - 
Apostilas” e URLwww.kl9xom.br/apostiIas. 

1 var state = { info: "info" }; 

2 window . history . replaceState (state , J ' K 1 3 - Apostilas", "apostilas"); 
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Exercicios de Flxa^ao 


© Adicione um arquivo chamado historico-paginal,html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
S 
3 

10 

11 

12 


< 3 DOCTYPE html > 

<html lang = " pt-br' 1 > 

<h>ead> 

<meta http-equiv = ” Content-Type r ' ■content-" 1 text / html ; charset=UTF-S" > 
<title>K19 - Historico Pagina 1</title> 

</head> 

<body> 

<h1>K19 - Historico Pagina 1</h1> 

<button onclick="wi ndow. history . forward () ; "> A van ^ar 1 pagina</button> 
<button onclick = "window. h istory . go (2) ; '^Avangar 2 pagi na</but ton> 
</body> 

</h tml> 


Codigo HTML 4.52: historicQ-paginaI.html 


Arquivo: https: //github. com/KS 9/K19-Exercicios/archive/k02-javascript-f ixacao94. zip 


© Adicione um arquivo chamado historico-pagina2.html no projeto javascript. 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

11 

12 


<!DOCTYPE html> 

<html lang = ,r pt -br "> 

<bead> 

<meta http -equiv = J| Content -Type" con tent = w text/htm.1 ; charset=UTF -E " > 
<title>K19 - Historico Pagina 2</title> 

</head> 

<body> 

<h1>K1 3 - Historico Pagina 2</h1> 

<button onclick-^wi ndow . history . back O ; J| >Voltar 1 pagi na</ but ton > 
<button onclick = "window. history . f orward (); ">Avan^ar 1 pagina</button> 
</body> 

</html> 


Codigo HTML 4.53: histiorico-pagina2.htmt 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao95. zip 


@ Adicione um arquivo chamado historico-pagina3.html no projeto javascript. 


1 <!DOCTfPE html > 

2 <htm 1 lang = " pt-br 1 " > 

3 <head> 

4 <meta http-equiv = J| Content-Type" content^” text/html ; charset = UTF-S" > 

5 <title>K19 - Historico Pagina 3</title> 

6 </head> 

7 <body> 

3 <h1>K13 - Historico Pagina 3</h1> 

3 < but ton onclick=”wi ndow . history . go (-2) ;' r > Volta r 2 pagi na</but ton > 

10 < but ton onclick= r 'wi ndow . h is tory . back Q >Voltar 1 pagi na</but ton > 

11 </body> 

12 </html> 


Codigo HTML 4.54: historico-pagina3.html 


AiqUivO: https://github.com/K19/K19-Exercicios/archive/k02-javascript-fixacao96 , zip 
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0 No Windows, utilize o Chrome para acessar na sequencia os enderegos: 


httpr/Zlocalhost/javascript/publicJitml/historico-paginal .html. 
http://localhost/javascript/public_htnl/historico-pagina2.html. 
http:>/localhost/javascript/public_htnl/historico-pagina3.html* 

No Ufountu, utilize o Chrome para acessar na sequencia os endereqos: 

http: //localhost/~<IJSUARIO>/javascript/pubIic_htriil/historico-pagina1 . htmL 
http://localhost/"'<USUARIO>/javascript/public_html/historico-pa£ina2.html J 
http://localhost/" , <ljSUARIO>/javascript/public_html/historico-pagina3. html. 

Navegue atraves dos botoes. 




Se o usuario permitir, podemos obter a localiza^ao dele atraves da API de Geolocalizagao do 
HTML5. Essa localizagao pode ser utilizada para diversos propdsitos. Por exemplo, podemos exibir 
publicidade relacionada a regiao onde o usuario esta. 

O prlmeiro passo para utilizar essa API f e definir uma funqao JavaScript para receber a localizaqao 
quando ela for obtida. 

1 function positionCallback(position) { 

2 console . log ( r 'Lat i tude : ' r + pos ition . coords . lati tude) ; 

3 console . log ( r 'Longi tude : " + posit ion . coords . longitude) ; 

4 1 


Depots, devemos utilizar a funcao getCurrentPosition para solicitar a localiza^ao do usuario. 

1 I navigator,geolocation.getCur rentPosition(positionCallback); \ 



Exercfcios de Fixa9ao 


© Adicione um arquivo chamado geo local izacao.html no projeto javascript. 


2 

3 

4 

5 

6 

7 

8 
S 

10 

11 

12 

13 


<!DOCTYPE html> 

< ht m 1 lang = ’ l pt-br' l > 


<head> 

cmeta http-equiv = ! " Content-Type r ' content = "text/html ; charset = UTF -8" > 
<title>Kl9 - Geolocalizacao</title> 

<style type= 1,1 text/css Jr > 


#mapa { 

width: 8£>0px; 
height : &00px; 


</style> 


<!-- google maps api —> 
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14 

15 

16 

17 

18 

19 

20 
21 
22 
23 


<scr ipt src = " https : // maps . google apis , com / maps /api / js?v = 3 , exp8csensor = f al se" > 
</script > 

^script src = " geolocalizacao . js '■ ></ scri pt > 

</head> 

<body> 

<hl>K19 - Geolocalizacao</h1> 

<div id = r ' mapa" ></div> 

</body> 

<f html> 


Codigo HTML 4.55: geolocalizacaoJitml 


Arquivo: https://github.com/K19i/IC19-Exercicios/archive/k02-javascript-fixacao98 . zip 


@ Adicione um arquivo chamado geolocalizacaoqs no projeto javascript. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 


function positionCallback(posit ion) { 

var latitude = position.coords,latitude; 
var longitude = posit ion.coords.long!tude; 

var geolocation = new google.maps.LatLng(latitude, longitude); 

var mapQptions = L 
zoom: 18 r 

center: geolocation, 

mapTypeld: google.maps.MapTypeld.ROADMAP 

}; 

var div = document.getElementById( "mapa "}; 
var map = new google.maps.Map(div, mapQptions); 

var marker = new google.maps.Marker (( 
position: geolocation, 
map: map r 

title: "Voce esta aquif' 1 

}); 


window. onload = functionQ L 

navigator.geolocation,getCurrentPosition(positionCallback); 

}; 


Arquivo: https://github.con/KIS/KI9-Exercicios/archive/kQ2-javascript-fixacao99.zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/geolocalizacao.html. 

No Ubuntu, utilize o Chrome para acessar o endereqo: 


h 11p : //loca1 host /~< U5U ARI0>/ j avaser i pt/public_html/geoloca1 i zacao . htm1 , 


A. 

Alarmes (Conteudo Extra) 


Podemos agendar tarefas para serem executadas no futuro. Para isso, podemos utilizar os meto- 
dos setTimeout e setlnterval, A primeira permite definir mna fungao que deve ser executada apenas 
uma vez depois de um deter min ado tempo, A segimda permite definir uma funqao que deve ser 
executada de forma periodica. 
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No exemplo a seguirj definimos uma fungao que sera executada uma vez depois de 1600 milise- 
gundos. 

1 window . setTimeou ( function () £ 

2 console.log( p timeout "); 

3 }, 1600); 


Por outro lado, nesse outro exemplo, definimos uma fungao que sera executada a cada 2500 mi- 
lisegundos. 

1 window , setl nterval ( function () £ 

2 console . log{ " interval Jr ) ; 

3 2500) ; 


Podemos cancelar os alarmes com os mefodos clearTimeoul e clear Interval. Esses metodos 
necessitam da refer encia da fungao as so cl ad a ao alarm e. 

1 

2 

3 

4 

5 

6 
7 


function alarmeTimeout () £ 
console . log( "timeout" ); 

1 

window.setTimeout(alarmeTimeout, 1600); 
window.clearTimeout(alarmeTimeout); 


1 function alarmelnterval() { 

2 console . log{ "interval "); 

3 1 

4 

5 window . set I nterval (alarmelnterval , 2500); 

6 

7 window.clearInterval(alarmelnte rval); 



Exercicios Complementares 


0 Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 
navegador os numeros de 1 ate 50 duas vezes. 


e Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 
navegador o seu nome cinco vezes. A cada exibicao do seu nome, exiba tres vezes a palavra "K19" 


Q Crie um documento HTML vinculado a um documento JavaScript que percorra todos os mime- 
ros de 1 ate 60. Para os numeros multiplos de 3, exiba "***". Par a os numeros que nao sao multiples 
de 3 , exiba "*'1 

O Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 
navegador todos os numeros de 1 ate 80 exceto os multiplos de 4 e 7. Para esses exiba 
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0 Crie uni documento HTML vinculado a um docurnento JavaScript que exiba no console do 
navegador um triangulo de ***”. Vejao exemplo abaixo: 


* 


o Crie um documento HTML vinculado a um documento JavaScript que exiba no console do 
navegador varios triangulos de Observe o padrao abaixo. 


* 

* 


Q Os numeros de Fibonacci sao uma sequencia de numeros definida recursivamente. O primeiro 
elemento da sequencia eOeo segundo e 1. Qs outros elementos sao calculados somando os dois 
antecessores. 


0 , 


2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233... 


Crie um documento HTML vinculado a um documento JavaScript para exibir os 30 primeiros 
nuineros da sequencia de Fibonacci. 


Q Crie um documento HTML vinculado a um documento JavaScript que armazene 10 numeros 
em um array, Preencha todas as posiqoes do array com vaiores sequenciais e em seguida exiba-os na 
tela. Depois, escolha duas posiqoes aieatoriamente e troque os vaiores contidos nelas. Repita essa 
operaqao 10 vezes. Ao final, exiba o array novamente. 

Dica: O metodo Math.randomQ gera numeros aieatorios maiores ou iguais a 0 e menores do que 
1. O metodo MattnfioorO recebe um numero real como parametro e devolve o maior inteiro menor 
on igual a esse numero real. 


Q Crie um documento HTML vinculado a um documento JavaScript que armazene 10 numeros 
em um array Preencha todas as posigbes do array com vaiores aieatorios e em seguida exiba-os na 
tela. Apos exibir o array ordene o array do menor valor para o maior, Ao final, exiba o array ordenado. 
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Dica: Os arrays possuem urn metodo chamada sort. Esse metodo ordena os elementos dos ar 
rays. 

Resumo do Capftulo 


A linguagem de programacao JavaScript e utilizada principalmente para aumentar a interativi- 
dade entre as paginas web e os usuarios. 


► Codigo JavaScript pode ser aplicado aos documentos HTML de duas formas: JavaScript interno 
e JavaScript externo. 


► 

► 


O carregamento do codigo JavaScript depende do posicionamento do elemento script 


Comentarios JavaScript de bloco podem ser definidos com os marcadores I* e *t. script. 


Comentarlos JavaScript de linha podem ser definidos com o marcador //. script. 


Em JavaScript, as variaveis sao criadas atraves da palavra especial var. 


Variaveis nao inicializadas possuem o valor especial undefined. 


Os operadores do JavaScript sao: 


* Aritmetico: + - * / % 

* Atribuigao: = +- -- *= /= %= ++ — 

* Relacional: == !=s < <- > >= 

* Logico: && || 


► 


O operador + e utilizado para concatenar strings. 


A linguagem JavaScript permite a defini^ao de objetos com a sintaxe do JSON, 


Fun^oes JavaScript sao criadas com a palavra function. 


Us metodos get Element By Id (), getE lenient sBy Name (), getElementsByTagName(), getEle- 
mentsByClassNatneOj query Selector (} e querySelectorAlIQ sao utilizados para recuperar os ele- 
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mentos de um document© HTML, 


Os metodos getAtlribute(} e setAttributeQ sao utilizados, respectivamente, para recuperar e 
alterar os valores dos atributos dos elementos HTML. 


O conteudo de tun elemento HTML pode ser acessado atraves da propriedade innerHTML. 

A propriedade style pode ser utilizada para alterar as propriedades CSS dos elementos HTML. 


Os metodos remove() e removeChildQ sao utilizados para remover elementos de um docu- 
mento HTML, 


Os metodos appendChild() e insertBeforeO sao utilizados para adicionar elementos em um 
document© HTML, 

A interatividade entre as paginas web e os usuarios depende dos eventos JavaScript. 


Podemos armazenar dados na maquina dos usuarios com a API do Web Storage. 


Po demos controlar o his tori co do navegador com a API History. 


Podemos obter a localizaqao dos usuarios atraves da API de geolocalizaqao. 


O Prova 


| Qual alternative esta correta? 

a) Podemos associar codigo JavaScript aos documentos HTML atraves dos elementos script e js. 

b) O codigo JavaScript sempre e carregado antes de todos os elementos HTML. 

c) O codigo JavaScript sempre e colocado dentro do documento HTML. 

d) O elemento script so pode ser colocada no corpo do elemento bead. 

e) Podemos associar codigo JavaScript aos documentos HTML atraves do elemento script, 

| Qual alternativa esta correta? 
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a) A palavra especial var e utilizada para criar variaveis. 

b) As variaveis JavaScript armazenam apenas valores do tipo string. 

c) As variaveis JavaScript nao inicializadas possuem o valor empty. 

d) Na linguagem JavaScript, duas variaveis nao podem armazenar o mesrno valor. 

e) Os nomes das variaveis JavaScript devem iniciar obrigatoriamente com a letra v. 

| Considere o seguinte tree ho de codigo JavaScript. 

var i = 10; 

var j = ++i + i--; 

Qual e o valor da variavel j? 

a) 18. 

b) 19. 

c) 20. 

d) 21. 

e) 22. 


Q Considere o segulnte tree ho de codigo JavaScript. 


var i - 10; 
var j - 15; 




console . log (E( i < j) ? (j S 2 == i % 3 ? ,,r K01 JI : 
Kll ")); 

: " K 0 2 ,r ) : 

(j % 4 > i % 4 7 lp K 0 3 ,p : 



O que sera exibido no console do navegador? 


a) KOI. 

b) K02, 

c) K03, 

d) Kll. 

e) N e nhum a das ant eriores. 

| Considere o segulnte trecho de codigo JavaScript. 
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var i - 10; 

while(i++ < 15) { 
console.log(++i); 

} 

Quais numeros serao exibidos no console do navegador? 

a) 12, 14 e 16, 

b) 12 e14. 

c) 11, 13 e 15, 

d) lie 13. 

e) 11,12, 13 e 14. 


| Considere o segiunte trecho de codigo JavaScript. 


var objeto = fa: "b 1 ' , b: 
console , log Cobjeto [ '' a" ]) ; 
console . log(objeto[" b" ]) ; 
delete objeto.a; 
console , log Cobjeto [" a 1 " ]) ; 
console.log(objeto[ b" ]); 




O que sera exibido no console do navegador? 


a) b, a, b, undefined. 

b) a, b, undefined, a. 

c) b, a, undefined, a. 

d) b, a, undefined, b, 

e) a, b, a, undefined. 


| Qual alternativa esta correta? 

a) As fungoes JavaScript sao criadas com as palavras ftmc e function. 

b) As fungoes JavaScript sao criadas com a palavra function. 

c) As fungoes JavaScript sao criadas com a palavra func. 

d) Toda fungao JavaScript deve receber parametros. 

e) A linguagem JavaScript nao suporta fungoes. 
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| Qual altemativa esta correta? 

a) O metodo getElementsByldf) recup era elementos HTML por ID, 

b) O metodo getElementByTagName() recupera elementos HTML de urn determinado tipo. 

c) A propriedade css dos elementos HTML permite que as propriedades CSS sejam acessadas 
e/ou modificadas. 

d) O metodo remove() remove elementos de urn documento HTML, 

e) Podemos acessar o contend o de um elemento HTML atraves da propriedade html. 

| Qual altemativa esta correta? 

a) O evento blur e dispar ado quando um determinado elemento ganha o foco. 

b) O evento keyup e sempre disparado antes do evento keypress. 

c) A linguagem JavaScript nao suporta eventos. 

d) A unica forma de assoclar os eventos aos elementos HTML e o metodo addEventListenerQ, 

e) To das as alternativas anteriores estao incorretas. 

] Qual altemativa esta correta? 

a) A API Web Storage permite que dados sejam armazenados nos Web Servers. 

b) Os dados armazenados em Session Storage sao descartados apos o fechamento da aba ou do 
navegador correspondente. 

c) Para armazenadas dados com a API Web Storage, devemos utilizar o metodo put(). 

d) Para armazenadas dados com a API Web Storage, devemos utilizar o metodo addQ. 

e) Po demos apagar to dos os dados armazenados com a API Web atraves do metodo reset (), 

Q Qual altemativa esta correta? 

a) A API History permite descobrir as senhas dos usuarlos. 

b) Atraves da API de geolocaiizagao podemos descobrir a localizaqao dos Web Servers. 

c) A localizagao dos usuarios pode ser obtida atraves da API de geolocalizagao somente com a 
autorizagao dos usuarios. 
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d) A localizagao dos usuarios pode ser obtida atraves da API de geolocalizagao mesmo sem a au- 
toriza^ao dos usuarios. 

e) To das as alternativas anteriores estao incorretas. 


Minha Pontuacao 



Pontuacao Minima: 

8 

Pontuacao Maxima: 

11 
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Introdu^ao 


Basicarnente, jQuery e uma biblioteca JavaScript. Ela foi desenvolvida para simplificar e diminuir 
a quantidade de codigo JavaScript. Os principals recursos oferecidos por essa essa biblioteca sao: 


* Seletores 

* Manipulaqao de elementos HTML 

* Manipula^ao de propriedades CSS 

* Eventos 

* Efeitos e Animates 

* AJAX 


Para utilizer o jQuery, basta adicionar o arquivo JavaScript que contem o codigo dessa biblio¬ 
teca em um documento HTML. Esse arquivo JavaScript pode ser obtido no endereco http: //docs. 
jquery.com/Downloadirg_jQuery, Ele esta disponlvel em duas versoes: Compressed e Uncom¬ 
pressed. Em produ^ao, a primeira versao deve ser utilizada para nao sobrecarregar a transferencia 
de dados entre o Web Server e os navegadores. Em desenvolvimento, podemos utilizar a segunda 
versao pois ela possui um codigo bem mais legivel o que facilita a depuragao. 


1 

2 
3 


<head> 

Cscript typ6 = , ' text / javascript " src= " j query . j 5 ,r ></ ser ipt> 
</head> 


Nessa abordagem, a quantidade de dados transferidos entre o Web Server e os navegadores e 
muito alta. Alem disso, dependendo da localizagao dos usuarios, a latencia para o download do 
arquivo JavaScript do jQuery pode ser alta tambem. Para diminuir essa quantidade de dados e essa 
latencia, podemos utilizar um CDN (Content Delivery Network). Basicamente, CDN e uma rede de 
computadores conectados a Internet focada na distribuicao de conteudo. Eis algumas opedes de 
CDN: 


* CDN do jQuery (MaxCDN] 


1 < script src=" http ‘.//code . j query . com / j query -1 . 10.1 . mi n . js ">< /scrip t> 


* Google CDN 
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1 <script 

2 src =" http : / /ajax . googleapi s . com/a jax/1 ibs / j query / 1 . 1 0 . 2/ j query . min . js' r ></ scr i pt> 


* Microsoft CDN 


1 <script 

2 src = " ht tp : / /a j ax . aspnetcdn . com / ajax / j Query / j query -1 . 10.2. min . js " ></script> 


• CDNJS 


1 <script 

2 5rc= n, http://cdn,js.cloudflare. com / ajax / libs/ j query / I . 1 0 . 2/ j query . min . j s "></ script* 


A documentagao completa do jQuery esta no enderego http: / /docs . j query . com/. 

Exercicios de Fixa^ao 

0 Abra o Netbeans e crie uni projeto chamado jQuery. 




Importante 

No Windows, utilizando o IIS (Internet Information Services! como Web Sender, voce 
deve salvar o projeto jQuery em C:\inetpubVwwwroot, Lembre-se que e necessario 


instalar o IIS conforme vimos anteriormente. 



Importante 

No Ubuntu, utilizando o Apache HTTP Server como Web Server, voce deve salvar o 
projeto jQuery em /home/<USUARIO>/public_htmI. Lembre-se que e necessario 


instalar e configurar o Apache HTTP Server como vimos anteriormente. 
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Figura 5.1 : ProjetojQuery 



Figura 52: ProjetojQuery 
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Figiira5.3: Projeto jQuery 


Arquivo: https://github.com/KI9/K19-Exercieies/archive/k02-jquery-fixacaol.zip 


O No projeto jQuery, crie urn arquivo chamado jQueryhtml 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 


< ! DOCTYPE titifll > 
chtml lang = ,r pt -br "> 

<head> 

<meta http-equiv= JI Content-Type" content^” text/html ; char set = UTF-S J| > 
<title>K19 - jQuery</title> 

<scr ipt src- 1 ' http : / /code .jquery . com/ jquery -1.10.1 . rui n . js ”></script > 
<style type= p text/css ■" > 
div { 

height: 200 px; 

width: 400px; 

background-color: yellow; 

} 

</style> 

</head> 

<body> 

<button id = "esco rider w >Esconder</button> 

< but ton id = "ntostrar J| >Most rar </button> 

<d iv></div> 

< script src = l ' jQuery . js "></ sc ript > 

</body> 

</html> 


Codigo HTML 5.6: jQuery.html 


Arquivo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao2.zip 


Q No projeto jQuery, crie mn arquivo chamado jQuery.js, 
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1 

i ("flesconder" ) . click(funotion () { 

2 

SC’d.iv") . slideUp() ; 

3 

4 

}); 

5 

$( "flmostrar" } . click (function.{) i 

6 

SQ "■ d l v" > . slideDowrt{) ; 

7 

}); 


Codigo Javascript 5A; jQuery.js 


Arquivo: https://github.com/K!S/Kl9-Exercicio5/archive/k02-jquery-fLxacao3.zip 

HI No Windows, utilize o Chrome para acessar o endere^o: 

h 11 p://loca1host/j Que ry/pu blic_h trnl / jQuery.h tml , 

No Ubuiitu, utilize o Chrome para acessar o endereco: 

http: //localhost/'<USUARIO>/jQuery/pijblic_ht[!iI/jQuery. html. 


Eventos 


Even to 

Descri^ao 

ready 

Esse evento e disparado apds o carregamento arvore de elem entos do documento 
HTML. 

http://api.jquery.com/ready 

resize 

Esse evenlo e disparado quando a janeia do navegador e redimensionada. 

http://api.jquery . com/resize 

scroll 

Esse evento e disparado quando a barra de rolagem de um elemento e movimentada. 

http://api.jquery . com/scroll 

focus 

Esse evento e disparado quando um elemento ganha o foco. 

http://api.jquery.com/focus 

focusin 

Esse evento e disparado quando um elemento ou um dos seus descendentes ganha 
o foco. 

http://api.jquery . com/focusir 

blur 

Esse evento e disparado quando um elemento perde o foco. 

http://api.jquery . com/blur 

focusout 

Esse evento e disparado quando um elemento ou um dos seus descendentes perde o 
foco. 

http://api.jquery . com/focusout 

select 

Esse evento e disparado quando o valor de um elemento e selecionado. 

http://api.jquery . com/select 

change 

Em determinados casos, esse evento e disparado depots de um elemento ter o seu va¬ 
lor modificado e em seguida perder o foco. Em outros casos, esse evento e disparado 
depois de um elemento ter o seu valor modificado e selecionado nessa ordem. 

http://api.jquery.com/change 

key down 

Esse evento e disparado quando uiua tecla e pressionada. 

http://api.jquery . com/keydowu 
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Evento 

Descrigao 

keypress 

Esse evento e semelhante ao evento keydown. Contudo, ele nao e disparado para 
teclas que nao representam caracteres (exemplo: SHIFT , CTRL, ALT entre outros). O 
keypress e disparado depois do keydown. 

http://api . jquery . com/keypress 

keyup 

Esse evento e disparado quando uma tecla e soita. 

http://api.jquery . com/keyup 

dick 

Esse evento e disparado quando o usuario dica sobre um elemento com o botao es- 
querdo ou com o botao do meio do mouse. 

http://api.jquery . com/click 

dbldick 

Esse evento e disparado quando o usuario realiza um duplo clique sobre um ele¬ 
mento com o botao esquerdo ou com o botao do meio do mouse. 

http://api.j query . com/dblclic k 

mousedown 

Esse evento e disparado quando o usuario pressiona um botao do mouse sobre um 
determinado elemento. 

http://api.jquery . com/mousedown 

mouseup 

Esse evento e disparado quando o usuario soita um botao do mouse sobre um deter¬ 
minado elemento. 

http://api.jquery . com/mouseup 

mouseenter 

Esse evento e disparado no momento em que o ponteiro do mouse passa a estar 
sobre um determinado elemento. 

http: / /api .jquery . com/mouseefiter 

mouseleave 

Esse evento e disparado no momento em que o ponteiro do mouse passa a nao estar 
sobre um determinado elemento. 

http://api.jquery . com/mouseleave 

hover 

Esse evento e disparado no mouseenter e mouseleave. 

http://api.jquery . com/hover 

mouveover 

Esse evento e disparado no momento em que o ponteiro do mouse passa a estar 
sobre um determinado elemento ou sobre osseus descendentes. 

http://api.jquery . com/mouveover 

mouse out 

Esse evento e disparado no momento em que o ponteiro do mouse passa a nao estar 
sobre um determinado elemento ou sobre osseus descendentes. 

http://api. j query . com/mouseout 

m ouse m ove 

Esse evento e disparado quando o ponteiro do mouse se move sobre um determi¬ 
nado elemento ou sobre os seus descendentes. 

http: //api .jquery . com/irauseirove 

submit 

Esse evento e disparado quando um formulario e enviado. 

http://api.jquery . com/submit 


on 


Podemos definir o tratamento dos eventos coni o nietodo on. No exemplo abaixo, o prinieiro 
parametro e o nome do evento que sera tratado e o segundo parametro a funqao que tratara o evento. 

1 

2 
3 


$( J| body ") . on ( IJ click ", function ()£ 
console . log ('* click IJ ) 

}); 


O tratamento de divers os eventos pode ser definido com mna unica charnada do metodo on. 


1 |$( "body" ). on( H click mouseenter mouseleave p ' , function (}{ 
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2 console.logC "click nnouseenter mouseleave" ) ; 

3 })-, 


Off 

Podemos eliminar o tratamento de um evento com o metodo off. A seguir, mostramos algumas 
formas de utiliza^ao desse metodo. 

1 

2 

3 

4 

5 

6 
7 
S 


/* Removendo todos os tratamentos associados aos eventos dos paragrafos */ 
$( JI P J ')'Off() ; 

/* Removendo todos os tratamentos associados ao evento de clique dos paragrafos */ 
$("p JI ). off ("click”) ; 

/* Removendo um tratamento especifico associado ao evento de clique dos paragrafos */ 
$( "p"') .off (" click r \ tratamento); 


Atalhos 

O tratamento de um evento pode ser definido atraves de metodos que funcionam como atalhos 
para o metodo on. No exemplo abaixo, utilizamos o metodo dick que e um atalho para on( M cIick", 
fun^ao). 

1 1( "body" ) . click( function ()t 

2 console,log(" click ; 

3 }); 


Analogamente > para cada evento, ha um metodo de atalho com o mesino nome. 

Propriedades 

Os eventos sao associados a informa^des especificas. Por exemplo, quando o evento click e dis¬ 
par ado, ele e associado a uma coordenada horizontal e uma vertical. Essas coordenadas definem 
a posl^ao do ponteiro do mouse quando o clique ocorreu. Para recuperar essas inform acoes, basta 
adicionar um parametro nas fun^oes de tratamento de eventos. 

No exemplo abaixo, utilizamos as propriedades pageX e pageY para recuperar as coordenadas 
correspondentes a posi^ao do ponteiro do mouse quando um clique ocorrer no body. 

1 

2 
3 


${ "body" ) . click( function (event)£ 

console . log ( " click : (" + event,pageX + " r 

, " + event.pageY + ")" ); 

))l 



Propriedade 

Descrigao 

pageX 

Coordenada horizontal da posi^ao do ponteiro do mouse. 


http://api.jquery.com/event.p3geX 

pageY 

Coordenada vertical daposi^ao do ponteiro do mouse. 


http://api.jquery . com/event.p3geY 

event, time St am 

A diferen^a em milissegundos entre 01/01/1970 e o momento no qual o evento foi 
criado. 


http: /Vapi.jquery . com/event.timestamp 

event, type 

O tipo de evento. 

http://api.jquery . com/event,type 


«Ki9 www. f ac ebook. com/k 1 9trei nam entos 


381 























I QUERY 


382 


Propriedade 

Descri^ao 

event.which 

A tecla ou o botao do mouse que foi pressionado. 

http://api. j query . com/event , wh i ch 


Mais Sobre 

Podemos utilizar a propriedade evenbwhich para recuperar o keyCode das teclas 
pressionadas nos eventos keydown, keypress e keyup. Contudo, e import ante saber 
que o mapeaniento de teclas para os eventos keydown e key up e diferente do mapeamento de 
teclas para o even to keypress. 



Exercicios de Fixa^ao 


o No projeto jQuery, crie um arquivo chain ado eventos.htmL 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 


<!DOCTYP£ h t ml> 

<html lang="pt -br" id = 1:1 html" > 

<head> 

<meta http-equiv=" Content-Type B content=" test/html ; char set = UTF-B J| > 
<title>K19 - jQuery</title> 

<scr ipt src = r ' http : / / code . jquery . com / jque ry - 1 . 10.1 .min . js r 'x/scri pt > 
<scr ipt src = " eventos . j s J| ></ scr ipt> 

<style type=" text /css" > 
body { 

width: lOQOpx; 
height: 300 px; 

} 

#div1 { 

width: 400px; 
height : 300 px; 

background-color: yellow; 

> 

#div2 { 

width: 40-Opx; 
height : 300 px; 

background-color: blue; 

1 

#div-interno { 
width: 400px; 
height : 300px; 

margin: auto; 
background-color: green; 

1 

</style> 

</head> 

<body id = ,r body"> 

<form id=" forml" > 

<input type="text" id = " input 1 "> 

</form> 

cform id = ,r forni2 ,r > 

<input type^' * 1 ' text J| id = rJ input 2" > 

</form> 

<div id="divl"> 

<div id= r 'div-interno l, '></div> 

</div> 

<div id=" div2 "></ div> 

</body> 

</html> 
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JQUERY 


Ccdigo HTML 5. 7: eventos.htmi 


Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-jquery-fixacao5.zip 


No projeto jQuery, crie um arquivo chamado eventos js. 


/* tratando o evento ready*/ 

$(document).ready( function ()£ 
console.log( "ready" ); 

/* tratando o evento resize */ 

$(window),resize( function () f 

var largura = $(window).width () ; 
var altura = $(window),heightQ ; 

console . log(" resize : (" + largura + ™ , J| + altura + 

}); 

/* tratando o evento scroll */ 

${window).scroll( function () { 
var x - $(window),scrollLeft(}; 
var y = $(window).scrollTopQ; 
console , log( "scroll : (" + x + " , ,r + y + ,r ) ,r ); 

}); 

/* tratando o evento focus */ 

3( ,r *' r ) . focus{ funct ion () £ 
var tagName = this .tagName; 
var id = this, id; 

console. log(" focus : ( ,r + tagName + " , #" + id + ■)"); 

}); 

/* tratando o evento focusin */ 

$(" *■'}. focus i n ( funct ion () £ 
var tagName = this .tagName; 
var id = this, id; 

console , log £ l? focus in : (" + tagName + ,r , #" + id * 

}); 

/* tratando o evento blur */ 

$( ,r * ,r ). blur ( funct ion (} { 

var tagName = this .. tagName; 
var id = this, id; 

console,log ( "blur: + tagName + ”, #" + id + 

}); 

/* tratando o evento focusout */ 

$( ,r *" ) . focusout (function (} £ 
var tagName = this .tagName; 
var id = this, id; 

console, log {" focusout: (" + tagName + w t #" + id + 

}); 

/* tratando o evento select */ 

$( Jl i nput "), select ( funct ion Q { 

console , log ( " select: ■(" + window . getSelect ion () + " ) lp ) ; 

}); 

/* tratando o evento change */ 

$( H input ") . change( function () { 

console , log C' change : (" + S(this).val() + r ') r '); 

}); 

/* tratando o evento keydown */ 

$( Jl i nput ’") , keydown( f unction (event) { 

console , logC keydown : ( Jl + event , which + 
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}); 

/* tratando o evento keypress */ 

$( " i nput J| } . keypress( function (event) { 

console.log( "keypress: (" + event.which + 

3); 

/* tratando o evento keyup V 

$( " i nput "} . keyy p ( function (event) { 

console.log{ "keyup : ( ,r + event,which + 

3); 

tratando o evento click */ 

$( "#div1 "). click( f unct ion (event ) { 

console . log( cli ck (' r + event.pageX + " , " + event.pageY + 

3); 

/* tratando o evento dblclick */ 

$( ' r #divl pr ) . dblclick( function (event) ( 

console . log ( " dblclick : (” + event,pageX + " , " + event.pageY + 

3); 

/* tratando o evento mousedown */ 

$( ,r #divl"). mousedown ( f unct ion (event) { 

console . log mousedown : (" + event.pageX + ' r , " + event.pageY + 

3); 

tratando o evento mouseup */ 

$( " #div T ") . mouseup ( function (event) { 

console . log ( 11 mouseup : {" + event . pageX + " , " + event. pageY + 

J); 

/* tratando o evento mouseenter */ 

$(' r #divl ir ). mouseenter (function (event) ( 

console . log (" mouseenter : (" + event. pageX + " , " + event. pageY ■+ 

}); 

/* tratando o evento mouseleave */ 

$("#divl' r ). mouseleave ( function (event) { 

console . log ( " mouseleave : (" + event. pageX + ” , M + event . pageY + 

3); 

/* tratando o evento hover */ 

S(' r #divl ,r ). hover ( function (event) { 

console . log( " hover : ( Jr + event , pageX + ", " + event. pageY + 

3); 

/* tratando o evento mouseover */ 

$(" #div T "}.mouseover( function (event) { 

console . log ( H mouseover : (' r + event . pageX + ' r , " + event.pageY +■ '■')"); 

3); 

/* tratando o evento mouseout */ 

$(' r #divl"). mouseout ( funet ion(event) { 

console . log ( " mouseout : (" +■ event.pageX + ", " + event . pageY + 

3); 

/* tratando o evento mousemove */ 

$( "#div2 ").mousemove( function (event) { 

console . log (" mousemove : (' r + event . pageX + !r , " + event. pageY + ")"); 

3); 

3); 


Codigo Javascript 5 . 7: eventosjs 


Arquivo: https: //github.com/KI9-/K19-Exercicios/archive/k02- jquery-fixacaoB . zip 
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0 No Windows, utilize o Chrome para acessar o endere^o: 


h 11 p : //loca 1 host / j Que ry /publi c_h tnil /e ventos. ht ml _ 

No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost/~<USUARIO>/jQuery/public_html/eventos.html. 


Utilize o console do navegador para observar as mensagens exibldas. 


*W Seletores 
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Seletor 

Descri^ao 

[atributo*="valor"] 

Seleciona os elementos tal que o valor de urn determinado atributo contain o valor 
especificado como substring. 

Hxemplu; selecionando us imgs com Lille contendo a siring lugo, 

| $( ,r ime[ title *=' logo ") 

http://api.jquery.com/attribute-contains-selector 

[atributo*-'valor"! 

Seleciona os elementos tal que o valor de um determinado atributo content o valor 
especificado como palavra, 

Exempto: selecionando os imgs com Lille conlendo a palavra logo. 

| $ (' r img[ title ”=’ logo J ] ") j 

http://api . jquery .com/attribute-contains-word-selector 

[atributo|="valor"] 

Seleciona os elementos tal que o valor de um determinado atributo e igual ao valor 
especificado ou inicia com esse valor seguido do caractere 

Hxemplu; selecionando os imgs com Lille iniciundo com o pnelixu logo. 

11 (" img[ title | logo J ] ") i 

[fl] [f2]...[fn] 

http://api.jquery.com/attribute-contain5-prefix-selector 

Seleciona os elementos de acordo com os filtros de atributo especificados. 

Hxemplu; selecionando os inputs com id e type Igual a lead. 

${ Jl input[id][type = ’ text 1 ] ,J ) 

http://api.jquery.com/multiple-attribute-selector 


Seleciona o elemento com o identificador especificado. 

Hxemplu; selecionando o elemento com id igual a tunleudo. 

$ ( " #con teudo Jl ) 

“tipo" 

http://api.jquery.corny id- selector 

Seleciona todos os elementos do tipo especificado. 

Hxemplu; selecionando os divs. 

| $ < " d i v '■ > | 

http://api.jquery.com/element-selector 

“si s2 M 

Seleciona todos os elementos que com bin am com o seletor s2 e sao descen dentes de 
elementos que combinam com o seletor si. 

Hxemplu; selecionando os spans deseendenles de um div. 

|${ J| div span") j 

http://api.jquery . com/descendant-selector 

“si > s2” 

Seleciona todos os elementos que combinam com o seletor s2 e sao filhos de elemen¬ 
ts que combinam com o seletor si. 

Hxemplu: selecionando os spans lilhus de um div. 

|${"div > span”) | 

http://api.jquery.com/chiId-selector 
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Seletor 

Descri^ao 


“si +s2* 

Seleciona todos os elementos que combinam com o seletor s2 e sao irmaos sucessores 
adjacentes de elementos que combinam com o seletor si, 

Kxemplo; selecionandousps sucessoresadjacenleitieumhi. 


+ p") 


http://api.jquery.com/next-adjacent-Selector 


“si ‘ s2' h 

Seleciona todos os elementos que combinam com o seletor s2 e sao irmaos sucessores 
de elementos que combinam coni o seletor si. 

Kxemplo: .stlecionando os ps sucessores de um hi. 


$C' f hi - p") 


http://api . jquery.com/uext-sibling.s-seiector 


“ .classe” 

Seleciona todos os elementos da classe espedftcada. 

Kxemplo; selecionando os elementos da classe Litulo, 



$('\titulo Hr ) 


http://api.jquery.com/class-selector 


“sl,s2,s3...” 

Seleciona todos os elementos que combinam com pelo me nos um dos seletores espe- 
cificados. 

Kxemplo; selecionando os divs ou us elements da classe tilulu. 


${ Jl div , , titulo" ) 


http://api.jquery.com/multipie-selector 


:first 

Seleciona o primeiro elemento da lista dos elementos que combinam com o seletor 
utilizado. 

Kxemplo; .selecionando o primeiro div. 


$( ' F div : first") 


http://api.jquery . com/first-selector 


:last 

Seleciona o ultimo elemento da lista dos elementos que combinam com o seletor uti¬ 
lizado. 

Kxemplo; selecionando o lillimo div. 


$ ( Pl d i v : last") 


http://api.jquery.com/last-5elector 


:eq(n) 

Seleciona o n-esimo elemento da lista dos elementos que combinam com o seletor 
utilizado. 

Kxemplo; seiecionando o quarto div. 


${ J 'div:eq(3) JI ) 


http://api.jquery.com/eq-selector 


:gt(n) 

Da lista de elementos que combinam com o seletor utilizado, seleciona do (n+1)- 
esimo elemento ate o ultimo. 

Kxemplo; seiecionando do qUarLo ao dlLtmo div. 


|$( J| div: E t (2 ) " } 


http://api.jquery.com/gt-selector 
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Seletor 

Descri^ao 

:nth-last-child(n) 

Seleciona os elementos que possuem (n -1) irrnaos sucessores, 

Hxemplo: selecionando os diva que possuem exatamenle 3 irrnaos sUcessfllEt. 


$( "div: nth - child (4) " ) 


http://api.jquery . com/nth-last-child-selector 

:nth-of-type(n) 

Seleciona os elementos que possuem (n -1) irrnaos antecessores do mesmo tipo. 

Hxemplo: .sdecionando os diva que possuem exatamenle 3 irrnaos div anlecessores. 


$ ( " div : nth -of-type (4) " ) 


http: //api .jquery. com/nth-of-type-selector 

:nth-last-of-type(n) 

Seleciona os elementos que possuem {n -1) irrnaos sucessores do mesmo tipo. 

Hxemplo; setecionando os divs que possuem exaLamenle 3 irrnaos div sucessores. 


$ { J| div : nth. - last - of - type (4) 1,1 } 


http: //api .jquery . com/nth-last-of-type-selector 

: only- child 

: only-of-type 

Seleciona todos os elementos que nao possuem irrnaos. 

Hxemplo; saiecionando os divs que nao possuem irrnaos. 


|j(' r div : only-child") 


http: //api. j q ue ry . c ont/ only- ch i Id - selec tor 

Seleciona todos os elementos que nao possuem irrnaos do mesmo tipo. 

Hxemplo; seiecionando os divs que nao po&suem irrnaos div. 


$ { Jl di v : only -of - type" ) 


http: //api .jquery.com/only- of-type -select or 

:parent 

Seleciona todos os elementos que possuem filhos. 

Hxemplo; stlecionando os divs que possuem liiho. 


$ ( "div : pa rent" ) 


http://api.jquery . com/parent-selector 

: hidden 

Seleciona os elementos considerados hidden. Os elementos que nao ocupam espa^o 
na pagina sao considerados hidden. 

Hxemplo; selecionando os divs hidden. 


$( J| di v : hidden. 17 ) 


http://api.jquery . com/hidder-selector 

:visible 

Seleciona os elementos considerados visible. Os elementos que ocupam espa^o na 
pagina sao considerados visible. 

Hxemplo; -selecionando os divs visible. 


$("div:vi5ible") 


http://api.jquery.com/visible-selector 
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Seletor 

Descri^ao 

disabled 

Seleciona todos os elementos desabilitados. 

Hxemplo: selecionando os inputs desabililados. 

$( J| input:disablGd'') 

http://api.jquery.com/disabled-5electar 

:enabled 

Seleciona todos os elementos habilitados, 

Hxemplo: selecionando as inputs habilitados. 

|${" input: enabled 11 } j 

http://api.jquery.com/enabled-selector 

: contains C'texto 1 ') 

Seleciona todos os elementos que possuem o texto especificado em seu conteudo. 

Hxemplo; selecionando os divs que conlem o iexto k!9, 

$(' r div:contains(’kl9 ')" ) 

http://api.jquery.com/contains-selector 

:empty 

Seleciona todos os elementos sem conteudo. 

Hxemplo; selecionando os divs que nao possuem contelido. 

|$( "div:empty ") 

:has( seletor) 

http://api.jquery.com/empty-5elector 

Seleciona os elementos que possuem pelo menos urn descendente que combina com 
o seletor passado como parametro, 

Hxemplo; selecionando os divs que possuem pelo menos um img. 

${ Jl div : has (img)) 

:not(seletor) 

http://api.jquery.com/bas-selector 

Seleciona os elementos que nao comb in am com o seletor espedficado. 

Hxemplo; selecionando os elementos que nao sao div. 

| $ ( 11 : not (di v] Jl ) j 

http://api.jquery.com/rot-selector 

:button 

Seleciona todos os elementos button ou com types 11 but ton 1 '. 

Hxemplo; .selecionando os inputs com type='button'. 

% ( Jl i nput: button 17 ) 

http://api.jquery.com/buttor-5elector 

:file 

Seleciona todos os elementos com type= M file'\ 

Hxemplo; -selecionando os inputs com type=file r . 

| $( J| i nput : file |J ) 

http: //api .jquery. com/file- selector 
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Seletor 

Descri^ao 

: animated 

Seleciona todos os elementos que estao com algurna anima^ao em andamento. 

Kxemplu: selecionando os divs com anima^ao em andamenlo. 

$ ( J| di v : animated u ) 

http://api.jquery . com/animated-selector 

:root 

rejected 

:checked 

Seleciona o elemento raiz do documento. 

http://api.jquery.com/root-selector 

Seleciona os elementos option marcados. 

http://api.jquery.com/selected-selector 

Seleciona todos os checkboxes, radios e options marcados. 

ht tp://api,j query.c om/c hecked-selector 

:focus 

Seleciona o elemento que tem o foco. 

http://api.jquery.com/focus-selector 

: target 

Seleciona o elemento com id igual ao fragmento da URL. 

http://api.jquery.com/target-selector 



Exerclcios de Fixa^ao 


Q No projeto jQuery, crie um arquivo chamado seietores.html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 


< ! DGCTITPE html > 

<html lang = " pt-br ■" > 

<head> 

<meta http-equiv = JI Content-Type " coritent-" text /htral; charset-UTF-B" > 
<title>K'19 - jQuery</title> 

<script src = H http : / / code . jquery . com/ jquery -1 .10.1 . min . js "></script > 
<script src-" 1 seletores , js " ></script> 

</head> 

<body> 

<h1 id = '" ti tulo r ’>K1 9 - jQuery</h1> 

<form> 

<label for = "noine ''>Nome : </label> 

<input id^'^nome" type-" text" placeHolder = ''Jonas hirata" required> 
<label for-' 1 emai 1 J| >EmaiI : </label> 

< input id = H email" type-'"' text. rH placeholder-" jonas . hirata®ema i 1 . com J ' > 

<input type= "submit" value = "Enviar "> 

</ form> 

<ul> 

<li>K01 - Logica de Programagao</li> 

<li>K02 - Desenvolvimento Web com HTML, CSS e JavaScript</li> 
<li>K03 - Logica de Programagaoc/li> 

</ul> 

</body> 

</html> 


Codigo HTML 5.3: seletores.html 


ArQUivo: https://github.com/KI9/K19-Exercicios/archive/k02-jquery-fixacaoS.zip 
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a No projeto jQuery, crie um arquivo chamado seletores.js. 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 


$(document).ready(function () { 

$( J| i nput [ type = ’ text 1 ][ required ] r ' ) . css 
" background - color ,r : " yellow" 

}); 

$(•" label: first'').css({ 

"color 1 ': "red" 

}); 

$('■ input : last ") . css(1 
"color": J| blue" 

J); 

$( ' r li : even J| } . css ({ 

" background-color Jr : "gray' 1 

}); 

S( Hr input : eq (1) " ) . css ({ 

" background-color " : "green " 

$( " : header . css ({ 

"color": J| darkgreen *' 

}); 

}) i 


Codigo javascript 5.63: sele tores js 


Arquivo: https://github.com/K19/K19-E)tercicios/archive/k02-jquery-fixacao9.zip 


No Windows, utilize o Chrome para acessar o end ere go: 


http: //localhost/jQuery/public_htrnl/seletores.html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIO>/ j Query/public_htm1/se1e t ores.h tml . 


*W Efeitos e Animates 


Efeito 

Descrigao 

fade In 

Faz os elementos se tomarem opacos gradativamente, 

http://api. jquery. com/f.adelr 

fadeOut 

Faz os elementos se tomarem transparent^ gradativamente. 

http://api.jquery.com/fadeOut 

fadeToggle 

Faz os elementos opacos se tomarem transparentes gradativamente e os elementos 
transparentes se tomarem opacos gradativamente. 

http://api.jquery.com/fadeToggle 

fadeTo (opacidade) 

Modifica a opacidade dos elementos gradativamente ate atingir a opacidade espedfi- 
cada. 

http://api .jquery. com/faideTo 

hide 

Esconde os elementos. 

http://api.jquery,com/hide 
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Efeito 

Descrigao 

show 

Exibe os elementos. 

http://api.jquery.com/show 

toggle 

Esconde os elementos qne estao sendo exibidos e exibe os elementos que estao es- 
condidos. 

http://api.jquery . com/toggle 

slideDown 

Exibe os elementos com efeito de deslizamento, 

http: //api .jquerycom/sl ideDown 

slideUp 

Esconde os elementos com efeito de deslizamento. 

http://api.jquery.com/slideUp 

slideToggle 

Exibe os elementos que estao escondidos com efeito de deslizamento. Esconde os 
elementos que estao sendo exibidos com efeito de deslizamento. 

http://api.jquery.com/slideToggle 

animate 

Modifica gradativamente determinadas propriedades CSS ate atingir os valores espe- 
cificados. 

http://api.jquery.com/animate 


Duragao 

Poderaos definir a duraqao dos efeitos ou animagoes em mills se guild os. No exemplo abaixo, o 
tempo de execucao do efeito fadeOut foi definido como 1000 milissegundos. 

1 $( r a'' ). click ( function () f 

2 1( this ).fadeOut (1000) ; 

3 }); 


Callback 

Podemos definir lima fungao para ser executada ao termino da execugao dos efeitos on das ani- 
magoes. No exemplo abaixo, umafungao que exibe a mensagem “terminou o fadeOut” foi associada 
ao termino do efeito fadeOut. 


1 $(" a' r ) . click( function () { 

2 $( this) . fadeOut (1 ODD , function() { 

3 console . log(" terminou o fadeOut' 1 ); 

4 }); 

5 }); 



Exercicios de Fixa^ao 


© 


No projeto jQuery, crie um arquivo chamado efeitos. html. 


1 

2 

3 

4 

5 

6 

7 

8 
3 

10 


< 3 DGCT'/PE html> 

<html lang=" pt-br"> 

<head> 

<meta http-equiv=" Content -Type" contents” text/html ; charset=UTF-8" > 
<title>K19 - jQuery</title> 

<script src= 1 ’ http : / /code , jquery . com / j query - 1 .10.1 . min.js "></script > 
<script sr-c-" efeitos . js" ></script> 

<style type = H text /css J| > 
div { 

width: lOOOpx; 
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11 

height : 100 px; 

12 

background-color: yellow; 

13 

border: 1px solid black; 

14 

1 

15 

</style> 

16 

</head> 

17 

<body> 

18 

<button id = "fadeIn' , >fadeIn</button> 

19 

< but ton id = ,r fadeOut J| >fadeOut </ but ton > 

20 

<button id = f adeToggle r,, >fadeToggle</button> 

21 

cbutton id=" fadeTol " >fadeTo 0.5</button> 

22 

cbutton id = ,r f adeTo2 " >fadeTo 1,0c/button> 

23 

<button id = " hide p >hide</button> 

24 

< but ton id=" show |J >show</bu t ton> 

25 

<button id = ' r toggle |J >toggle</button> 

26 

<button id-"sli deDown "> slideDown</button> 

27 

< button id = J| slide Up " >slideUp</but ton> 

23 

<button id=" siideToggle ">slideToggle</button> 

29 

<button id-" animatel '^animate 1</button> 

30 

<button id = "animate2 ">animate2</button> 

31 

cdiv id-" 1 div r 'x/div> 

32 

</body> 

33 

</html> 


Cods go HTML 5.9: efeitos.html 


Avquivo: https://github.com/K15/Kl9-Exercicios/archive/k02-jquery-fixacaol1.zip 


© No projeto jQuery, crie um arquivo chamado efeitos.js. 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 


$(document) , ready ( funotion (}{ 

/* fadeln */ 

$( "#fadeln ").click{ function {)f 
${ 11 #div ") . fadeln (); 

}); 

/* fadeOut *7 

$( ,r #fadeOut "). click( function (}{ 

$( "#div" ).fadeOut () ; 

}); 

/* fadeToggle *7 

$( ' r # fadeToggle ").click( function, {) f 
$( JI £div 1 '') . fadeToggle (} ; 

}); 

/* fadeTol */ 

${" #fadeTol" ).click (function()( 

$( "#div" ) , fadeTo £ " fast" , 0,5) ; 
}); 

/* fadeToZ */ 

$( "#fadeTo2" ).click( function (){ 

$ ( J| £ d i v" ) , f a d eTo ( " f a s t" , 1 , 0) ; 

}); 

/* hide */ 

${-"#hide JI ).click£ function () f 
$( "#div” ).hide() ; 

}); 

/* show */ 

$( Jl ffshow' 1 ) . click ( function () f 
${ JI #div"') . show () ; 

}); 

/* toggle */ 
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33 

39 

40 

41 

42 

43 

44 

45 

46 

47 
43 

49 

50 

51 

52 

53 

54 

55 

56 

57 
53 

59 

60 
61 
62 

63 

64 

65 

66 

67 

68 

69 

70 

71 

72 


$(■"# toggle '■}. click( function ()f 
$(" #div" ).toggle Q ; 

}); 

/* slideDown */ 

$( '■ #sl ideDown n ) . click (function (){ 

$( ' r #div ") . slideDown() ; 

}); 

/* slideUp */ 

$( "#slideUp" ) . click( function (){ 

$( "#div ").slideUp() ; 

}); 

/* slideToggle */ 

$(' l #slideToggle hl ) . click( fu n ction (){ 
$( "#div") ,slideToggle(); 

)); 

/* animatel */ 

$(''#animate1").click(function(){ 

$( J| #div R ) . animate(f 

"border -width J| : "5px", 

"margin-top ,r : "lOOpx" 

}); 

}); 

/* animate2 */ 

$( "#animate2 "}.click( function (){ 
$("#div n ) , animated; 

"border -width ,r : "Ipx", 

"margin - top' 1 : "0" 

}); 

}); 


Codigo Javascript 5.66: efeitos.js 


Arquivo: https:/7github.com/K19/K19-Exercicios/archive/k02-jquery-fixacao12.zip 


^ No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/jQuery/public_html/efeitos,html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


http://localhost/~<USUARIQ>/jQuery/publicjitml/efeitos.html, 


Manipulated 


M etc do 

Descri^ao 

addClass 

Adiciona uraa ou mais classes aos elementos selecionados. 


iixemplu: adieiunando as classes destaquo e grid nos divs. 


| $(" div addClass(" destaque grid") 


http://api, jquery. com/addlClaas 
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Metodo 

Descri^ao 

append 

Adiciona urn determinado conteudo no final do corpo de cada um dos elementos selecio- 
nados. 

Exempkj; adieionando o Lexlo (fonler K19) no final de cada p. 

| $( J| p append ( " <em>( fonte K1 9) </em>” ) 

http://api.jq.uery. com/append 

prepend 

Adiciona urn determinado conteudo no comedo do corpo de cada um dos elementos sele¬ 
cionados, 

Exempio: adicionando o Lexlo (fume: K19) no comedo de cada p. 

|$( 11 p "}. prepend ( r '<em>( fonte K19)</em>"} j 

http://api.jquery . com/prepend 

appendTo 

SemeJhante ao append com sintaxe levemente diferente. 

Exemplo: adicionandoo Lexlo ifonie; K19) no Ilnalde cada p. 

$( "<em>(fonte K19}</em>" ) . appendTo{ "p" ) 

http://api.jquery.com/appendTo 

prependTo 

SemeJhante ao prepend com sintaxe levemente diferente. 

ExempLo: adicionando o Lexlo (fonte: K19] no comeqo de cada p. 

|$( J| <enn>(fonts K'l9)</eni> "). prependTo( "p' 1 ) j 

attr 

http: //api. jqua ry . com/prependT □ 

Esse metodo pode ser utiJizado para do is propositos. 0 primeiro e recuperar os valores dos 
atributos do primeiro elemento seJecionado. 0 segundo e aJterar os valores dos atributos de 
todos os elementos selecionados. 

Exemplo: recuperando o Id do primeiro div. 

var id = $( r 'div") . attr ("id") ; 

Exemplo: allerando os atributos src, title e all dos inrgs. 

$( JI img "} . attr ({ 

src: "http : // www. kl 9 . com . br/ figs / main - header - logo . png" , 
title: ''KIS", 
alt: "K19 Logo' 1 
}); 

http://api.jquery . com/attr 

prop 

Esse metodo pode ser utilizado para dois propositos, 0 primeiro e recuperar os valores 
das propriedades do primeiro elemento seJecionado. 0 segundo e alterar os valores das 
propriedades de todos os elementos selecionados. 

Exemplo; reciiperando o valor da propriedade checked do primeiro inpuL com lype= checkbox'. 

var checked = $('' input [ r checkbox prop (" checked "} ; 


Exemplo: allerando o valor da propriedade checked do primeiro input com Lype='checkbox'. 

| $( ,r input [ r checkbox '] Jl }. prop ( Jr checked 11 , false) 

http://api.jquery.com/prop 
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Metodo 

Descri^ao 

css 

Esse metodo pode ser utilizado para dois propositos. 0 primeiro e recuperar os vaJores das 
propriedades CSS do primeiro elemento selecionado. 0 segundo e alterar os valores das 
propriedades CSS de todos os elementos selecionados, 

Exemplo: recuperando a propriedade CSS color do primeiro div. 

var color = $( "div ") .css { " color " ); 

Exemplo; allerando as propriedades color, widlh e heigh [ dos divs, 

$( J| div'').css({ 
color: "red"* 
width: " 3(K}px " , 
height: "ISOpK 1 " 

1); 

http://api.jquery.com/css 

removeAttr 

Remove o atributo especificado dos elementos selecionados. 

Example: removendo o airibulo Lille dos imgs. 

| $ ( J| im.g " } . removeAttr ( Jl title " } ; 

http://api.jquery . com/removeAttr 

removeProp 

Remove a propriedade espedficada dos elementos selecionados. 

Examplo; removendo a propriedade title dos imgs. 

$ ( J| img " } . remove Prop ( ” title " ) ; 

http://api.jquery . com/removeProp 

done 

Cria uma copia dos elementos selecionados. 

Exempt0: criandu uma copia de Lodos os paragralos. 

|var paragrafos = $( "p l!l ). clone () ; 

detach 

http://api.j query . com/clone 

Remove os elementos selecionados da arvore de elementos e os devolve. 

Examplo: retirando os paragrafos. 

|var paragrafos = I£ "p "). detach Q ; j 

ht tp :/ /api.j q uery . com/d e t ach 

empty 

Remove o conteudo dos elementos selecionados. 

Examplo: removendo o eontelido dos paragrafos. 

$CP") ■ empty Q ; 

ht tp :/ /api.jquery . com/empty 

remove 

Remove os elementos selecionados da arvore de elementos. 

Example: removendo os paragrafos. 

| $( " p" }.remove () ; j 

http://api.jquery.com/remove 
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replaceAll 

Substitui tod os os elementos seJecionados. 

Exemplo: substiLuindo Lodos os paragrafos por <p:>Kl£Wp>. 

$ ( J| <p>K1 3 </p> " ) . replaceAl 1 ( H p IJ ) ; 

http: / /api. jqoery . com/replaceAl 1 

rep] ace With 

SemeJhante ao replaceAll com sintaxe levemente diferente. 

Exemplo: substiLuindo Lodos os paragrafos por <p>ltltk^p>. 

| $ ( p ” } . rep 1 ace Wi th ( " <p>K1 3 </ p>" } ; 

http :/ /a pi.j q aery . com/replac eWith 

height 

Esse metodo pode ser utilizado para do is propdsitos. O primeiro e recuperar a altura do 
primeiro elemento seiecionado. O segundo e alterar a altura de todos os elementos selecio- 
nados, 

Exemplo: recuperando a aEtura do primeiro div. 

va r altura = $( "div height (); 

width 

Exemplo; allerando aEtura dos divs, 

$( ,!| d i v 11 ) . height (100) ; 

http:/7api.jquery.com/height 

Esse metodo pode ser utilizado para dois propositos. O primeiro e recuperar a largura do 
primeiro elemento seiecionado. O segimdo e alterar a largura de todos os elementos seleci- 
onados. 

Exemplo; recuperando a Eargurado primeiro div. 

| var largura - $( J| div J| ). width () ; 

Exempt aUerando largura dos divs. 

$ ( ,r div " } . width (1 00) ; 

http://api.jquery.com/width 

innerHeight 

Recup era o innerHeight do primeiro elemento seiecionado. O innerHeight e a soma da 
altura, margem interna inferior e margem interna superior. 

Exemplo; recuperando o innerHeighl do primeiro div. 

var innerHeight = $( Jl di v ,r > . innerHei ght () ; 

http: //api. jquery . com/innerM-eight 

innerWidth 

Recupera o innerWidth do primeiro elemento seiecionado. 0 innerWidth e a soma da lar¬ 
gura, margem interna da esquerda e margem interna da direita. 

Exemplo; recuperando o innerWidth do primeiro div. 

var innerWidth = %( 'div "). innerWidth(); 

h t tp://api.j q uery . com/innerWidth 
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Metodo 


outerHeight 


outerWidth 


Descri^ao 


Recupera o outerHeight do primeiro elemento selecionado. Se esse metodo for chamado 
sem parametros, o outerHeight e a soma da altura, margem interna inferior, margem in¬ 
terna superior, borda inferior e borda superior. Se ele for chamado com o parametro true, 
o outerHeight e a soma da aitura, margem interna inferior, margem interna superior, borda 
inferior, borda superior, margem externa inferior e margem externa superior. 

Exempts recuperando o oulerHeight do primeiro div. 


var outer He ightl = $( ''div 1 '), outer He ight(); 
var outerHeight2 = S( "div outerHeight ( true ) ; 


http;//api.Jquery . com/outerheight 

Recupera o outerWidth do primeiro elemento selecionado. Se esse metodo for chamado 
sem parametros, o outerWidth e a soma da largura, margem interna da esquerda, margem 
interna da direita, borda da esquerda e borda da direita. Se ele for chamado com o parame¬ 
tro true, o outerWidth e a soma da largura, margem interna da esquerda, margem interna 
da direita, borda da esquerda, borda da direita, margem externa da esquerda e margem ex¬ 
terna da direita. 

Exempto: recuperando o outerWidth do primeiro div. 


var outerWidth! = J ("div ").outerWidth() ; 
var outerWidth2 = $(" div Jl }. outerWidth( true ); 


http: /7a pi. j query . com/outerWidth 


lit ml 


text 


Esse metodo pode ser utilizado para dois propositos. O primeiro e recuperar o conteudo 
HTML do primeiro elemento selecionado. O segundo e alterar o conteudo HTML de todos 
os elementos selecionados. 

Exempto: recuperaodo o conlelldo HTML do primeiro div. 


var conteudo = S ( u di v w ) . htinl () ; 


Exempt o: allerando a eonieOdo HTML dm divs. 


$ ( J| div " } . html ( " <h1 >K1 9<h/1 ><p>Cursos da 


http:/7api.jquery.com/html 

Esse metodo pode ser utilizado para dois propositos. O primeiro e recuperar o o texto com 
tido no corpo do primeiro elemento selecionado. O segundo e alterar o texto contido no 
corpo de todos os elementos selecionados. 

Exempt it recuperando o Lexiu contido no corpo do primeiro div. 

|var texto - $(" div ").text() ; j 

Exemplo; allerando u texto contido no corpo dos divs. 


$ ( J| di v " } . text ( " K1 9 Curses " ) ; 


http://api.jquery.com/text 


val 


Esse metodo e utilizado para recuperar o valor de elementos como input, textarea e select. 
Ele considera o primeiro elemento selecionado. 

Exempt□: recuperador o valor do primeiro input. 


var valor = $(" input val () ; 


http://api.jquery.com/val 
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J QUERY 


Metodo Descri^ao 


sci oil Left 


scrollTop 


Esse metodo pode ser utilizado para dots propositos. O primeiro e recuperar a posicao da 
barra de roJagem horizontal do primeiro element© selecionado. O segundo e aiterar a posi- 
^ao da barra de rolagem horizontal de todos os elementos selecionados. 


Lxemplu: recuperancla a posiq jo da barra de rolagem horizontal do primeiro div. 
var sc roll Left - SC'div' 1 ').scrollLeft(); 


H\emplo; allerando a posicao da barra tie rolagem horizontal dos diva, 
I $( "div" ) . scrol lLef t (300) ; 


http: //api„ jquery . com/scrollLeft 

Esse metodo pode ser utilizado para dois propositos. O primeiro e recuperar a posigao da 
barra de rolagem vertical do primeiro elemento selecionado. O segundo e aiterar a posicao 
da barra de rolagem vertical de todos os elementos selecionados. 

Exemplcc recuperantlcj a posit; jo da barra de rolagem vertical do primeiro div, 
var scrollTop = $(■" div scrollTop () ; 


Exemplo: allerando a posicao da barra de rolagem vertical dos diva. 


$( J| div"). scrollTop (300) ; 


ht tp :/fa pi.jq uery.com/s c rolItop 



Exercfcios de Fixa^ao 


o No projeto jQuery, crie um arquivo chamado inanipulacao.html 


1 

2 

3 

4 

5 

6 
7 
S 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 
13 
20 
21 
22 

23 

24 

25 

26 
27 
23 


<!DGCT VPE html> 

< ht m 1 lang = "pt-br HI > 

<head> 

<meta http-equiv = ” Content-Type r ' content- 1 ' test / html ; charset=UTF-8" > 
<title>K19 - jQuery</title> 

<style> 

.destaque { 

background-color yellow; 


> 

</style 
<script 
<script 
</head> 
<body> 
<button 
<button 
<button 
<button 


src= "http : / / code . jquery . com / jque ry -1 . 10.1 . min. js r 'x/script> 
src = " mani pulacao . js ,f ></ scrip t> 


id = J| addclass IJ >addClass</but ton> 
id = '' remove Cl as s "> removed ass </but ton> 
id = JI toggle Cl as s '">toggleClass</button> 
id = pr hasClass r '>jhasClass</button> 


<button 

<button 

<button 

<button 

<button 

<button 

<button 

<button 


id = " after ' r >af ter</button> 

id = " before rp >bef or e</ but ton> 

id = " insert After ' r > insert After </but ton> 

id = ' r insert Be fore^insert Be fore</but ton> 

id = J| append '’>append</bu tton> 

id = J| prepend J| >prepend</but ton> 

id = pl appendTo |J >appendTo</but ton> 

id = p| prepend To J| >pr ependTo</button> 
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29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 

44 


< but ton id = "height I;, >hei.ght</button> 

< but ton id = ' r width 11 >width</button> 

< but ton id = ,r inne rHei ght J| >innerHeight </button> 
<button id = "innerWidth ">inne rWidth</but ton> 
<button id = JI out e rhei ght" > outer Heigh t </ but ton> 
<button id = ,r outerWidth ">outerWidth</button> 

<div id- rt div1 ,f > 

<ul> 

<li>Jonas Hirata</li> 

<li>Marcelo Martins</li> 

<li>RafaeI Cosentino</li> 

</ul> 

< / d i v > 

</body> 

</html> 


Codigo HTML 5,10: man ip ulacao. h tm i 


Arqilivo: https://github,com/K19/K1 9-Exercicios/archive/k02-jquery-fixacaQl4.zip 


0 No projeto jQuery, crie um arquivo chamado mampiilacaojs. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 

44 


$(document).ready( function () f 
$ ("' # d i v 1 ,r ).css(t 

"border": "2px solid black" , 

"width" : Jl 800 px " , 

"height' 1 : "2QGpx" , 

"margin'": " 15 px ,r , 

"padding": ,r 15px" 

}); 

$(' l #addClass J ').clicktfunction(){ 

$( J| #di vl J| } . addClass( ' r destaque r ' ) ; 

}); 

${ Jl # removeClass " ) . click (function () { 

$("#div1 pl ). removeClass ( r ' destaque ,r ); 

}); 

$( Jl # toggleClass" ) . click (function ()f 
$( "#divl “ > . toggleClass ( F ' destaque ,r ) 

}); 

$(' l #hasClass : ">.click(function(){ 

var destaque = $( IJ #div1 r ' ). hasClass ( r ' destaque ,r ) ; 
alertCdestaque ? "Com destaque" : "Sem destaque"}; 

}); 

${''# after") . click( function ()f 
$(" # p1 ").remove(); 

$( " ftdivl J| ). after ( "<p id-- pi ’>af ter <p> FI ) ; 

}>; 

$(" #bef ore ") . click ( funct ion (){ 

$( " #pl ,r ) . remove () ; 

$( J| #di vl 11 } , before ( Jl <p id= ' pi f >before <p> FI ) ; 

}); 

$( Hl # insert After" ) . cli ck (funct ion () £ 

$( "#pl " } . remove () ; 

$( " <p id- f pi 1 >insertAf ter <p> JF ) . insertAfter( F '#div1 FJ ) ; 

}); 

1( pl # insert Bef ore ").click( function () { 

$( "#p1 " }.remove ( ) ; 

$("<p id= f p1 r > i nsertBef ore <p> FI ) . i nsertBef ore ( F '#di vl Fl ) ; 
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}); 

${ Jl # append J| ) ,click(functionC){ 

$( J| #pl ") . remove () ; 

$( " #divl J| } . append( " <p id- ' pi f >append <p> ri ) ; 

}); 

$( JI #prepend ,J ) . click( function (}{ 

$( H #pT ,r } . remove ( ) ; 

$( •" #div 1 " ) . prepend { N <p id = ’ pi ’ >prepend <p> H ) ; 

}); 

$( JI #appendTo'"}.click(functionQ{ 

$( " #p1 ") . remove () ; 

$( "<p id = r pi r >appendTo<p> r ' ) . appendTo ( p '#divl r ' ) ; 

}); 

$("# prependTo |J ) . click( function (){ 

$( " #p1 ,r ) . remove (); 

$( Jl <p id = r pT r >prependTo <p> 'V) . prepend To ( r '#div1 r ') ; 

}); 

$("# he i gh t J| },click(f unction (){ 

$( " #pl ") . remove () ; 

var height = $( "tfdivl r ' ). height (} ■ 

$(" #div 1 J| }. after ( "<p id='p1 J >height: " + height + rj <p> H ); 

}); 

$ ( ■" i d t h N ) . click ( function () { 

$( "#pl pr ) . remove () ; 

var width = $(" #divl ,r ). width (} ; 

$( ir #divV r ) . after ("<p id = 3 pi ’ >width : Jf + width + M <p> ri ) ; 

}); 

$("#innerHeight |J ) . click (function (}{ 

$( " #p1 "}.remove ( ) ; 

var innerHeight = $( ' p #div7 Ir ) , innerHeight (} ; 

$("#divl" ).after(”<p id='p1’>innerHeight: Ir + innerHeight r ' <p> r ') ; 

}); 

$( ,f #innerWidth ,r ) . click( function (){ 

$( J| #pl ") . remove () ; 

var innerWidth = $f r '#divl M ) . innerWidth () ; 

$(" ftdivl J| }. after ( "<p id = 1 pi ’ >inne rWidth : f ' + innerWidth + r '<p> r[ ); 

}); 

$( ,r # cm terHeight H ) . click (function () { 

$( " #pT ,r ) . remove (); 

var outerHeight = ${ ,r #di vl Ir ) „ outerHei ght (} ■ 

$(" £div1 J| ). after ( "<p id = ’pi ’^outerHeight : >r + outerHeight + , '<p>' 1 ); 

}); 

$( ,r #outerWidth ■"). click( function (){ 

$( Jl #p1 . remove () ; 

var outerWidth = $( f '#divl M ) . outerWidth (} ; 

$(" ffdivl ”}. after £ ”<P id = ’ pi 5 >outerWidth : r ' + outerWidth + F ' <p> r ' ^ ; 

}); 

}); 


Cedi go Javascript 5.119: man ipu lacao.js 


Arquivo: https: // github.com/K19/KT9-E)cercicios/archive7k02-jquery-fixacao15, zip 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/jQuery/public_html/manipulacao,html. 
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No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~< USUARIO>/jQue ry/p ub1i c_h t m1 /ma nipul acao . h tml . 


Mais metodos 
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Metodo 

Descri^ao 

slice 

Recupera um determinado trecho de uma Jista de elementos. 

Kxempio: recuperando do Lerceiro ao decimo elementos da lisLa de divs e spans. 


$("div, span"). slice (2, 9); 


http://api.jquery . com/slice 

next 

Devolve os irmaos adjacentes sucessores dos elementos de um conjunto. 

Kxempio; recupera os irmaos adjacentes sucessores dos divse spans. 


$("div, span") .next() 


http://api.jquery.com/next 

nextAll 

Devolve os irmaos sucessores dos elementos de um conjunto. 

Kxempio; recupera os irmaos sucessores dos divs e spans. 


$("div, span ' r > . nextAll () 


http://api.jquery . com/nextA11 

prev 

prevAll 

Devolve os irmaos adjacentes antecessores dos elementos de um conjunto. 

Kxempio; recupera os irmaos adjacentes antecessores dos divs e spans. 


$("div, span") . prev() 


http://api.jquery.com/prev 

Devolve os irmaos antecessores dos elementos de um conjunto. 

Kxempio; recupera os irmaos antecessores dos divs e spans. 


${"div, span") .prevAll () 


http://api.jq ue ry . c om/prevA11 


*# AJAX 


A forma basica de intera^ao entre os usuarios e as paginas web e limitada. Quando o usuario 
clica em um link ou em um botao de uma pagina web, uma requisite HTTP e enviada ao servidor 
c orre spoil dent e. Quando chegar no servidor, essa requisigao sera processada. No termino desse 
processamento, o servidor enviara uma resposta HTTP contendo uma pagina web para a maquina 
do usuario. Ao receber essa resposta, o navegador do usuario carregara a pagina inteira. 

Nessa abordagern, muitas vezes, ocorre um desperdicio de tempo, pois, na maior parte dos ca- 
sos, nao seria necessario carregar a pagina inteira e sim pequenos "pedagos" deia. Mesmo assim, o 
navegador sempre carregara todo o conteudo das paginas web. 

Alem disso, ha outro problema nessa abordagern, o usuario nao pode interagir com a pagina 
web durante o envio da requisigao HTTP; processamento no servidor; envio da resposta HTTP e 
car regam ento do pagina. 

Para aumentar a interatividade entre os usuarios e as paginas web, podeinos utilizar a forma 
de intera^ao conhecida como AJAX (Asynchronous Javascript and XML). Nessa outra abordagern, 
os navegadores podem atualizar “pedagos” de uma pagina web sem ter carrega-la completamente. 
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Alem disso, com AJAX, os usuarios podem interagir com as paginas web durante o envio da requisigao 
HTTP; processamento no servidor; envio da resposta HTTP e carregamento partial das paginas web. 

Utilizaremos os recursos da biblioteca jQuery para implementar a interagao entre os usuarios e 
as paginas web com AJAX. 

load 

Podemos obter conteiido de Web Server atraves do metodo load. Esse metodo realiza requisites 
HTTP do tipo GET com AJAX. No exemplo abaixo, o conteiido do documento HTML kl9.html obtido 
do servidor e inserido no corpo do elemento com id="conteiido 1 . 


$( " #ccmteudo J| } . load(' r k1 9 . html r ') ; 


get 

Podemos realizar requisites HTTP do tipo GET com AJAX atraves do metodo get. Esse metodo 
recebe como parametro a URL correspondente a requisigao que desejamos realizar. No exemplo 
abaixo, a requisigao foi realizada para URL kI9,php mas o resultado foi ignorado. 

$. get ( "kl 9 . php") ; 


Para recuperar o resultado da requisicao devemos utllizar o metodo done. Devemos passar como 
argument a para esse metodo a funcao que tratara o resultado. Ess a furigao recebera o resultado 
como parametro. Observe, no exemplo abaixo, que o resultado e exibido no console do navegador. 


var get = $. get ( Jl kl 9 , php ,r ) ; 

get,done( function (resultado) ■[ 
console,log(resultado); 

}); 


Tambem podemos enviar dados para o servidor. Veja o exemplo a segulr. 


var dados = { 
nome: "Rafael" , 

einpresa: ■“ K 1 9 

}; 

var get = $, get ( Jl kl 9 , php lp , dados); 

get,done(function(resultado) i 
console,log(resultado); 

)); 


Esses dados sao enviados como parametro na URL da requisigao. 
kl9 . php?nonne=Rafael&empresa=K19 

post 

Podemos realizar requisites HTTP do tipo POST com AJAX atraves do metodo post. Esse me¬ 
todo funeiona de forma semelhante ao metodo get. Veja alguns exemplos. 

$. post { " kl 3 . php" ) ; 
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var post = $, post ( Jl kl 9 . php ,r ); 

post.done(f unction (resultado) { 
console.log(resultado); 

»; 


var dados = { 
nome : ''Rafael", 
empresa: "K19" 

}; 

var post = S. post ( 11 kl 9 , php lp , dados); 

post . done (function (re suit ado) { 
console.log(resultado) ; 

}); 


Esses dados sao enviados corpo da requisi^ao HTTP 
kl 9 . php?nome=Rafael&empresa=K19 



Exercicios de Fixacao 


0 No projeto jQuery, crie um arquivo chamado ajax.php. 


1 

2 

3 

4 

5 


<?php 

$soma = $_REQUEST C IH k '' ] + S_REQUEST [" y \] ; 

echo Ssoma; 

?> 


Cddigo HTML 5.11: ajax.php 


Arquivo: https ://github,com/K19/K19-Exercicio5/archive/k02-jquery-fixacao1 7.zip 


0 No projeto jQuery, crie um arquivo chamado ajax.html. 


1 

2 

3 

4 

5 

6 
7 
a 

9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 


<!DOCTfPE html> 

< h t m 1 lang = "pt-br" > 

<head> 

<meta http-equiv=" Content-Type r ' content^" test/html ; charset-UTF-B" > 
<title>K19 - jQuery</title> 

<scr ipt src=" http : / /code . jquery. com / jquery -1.10.1 . mi n . js '*></ scr i pt > 
<script src = p a jax . js ”></scri pt > 

</head> 

<body> 

<form action = "ajax . php'' me t hod = " post |J > 

<label for = "x pl >X :</label> 

< input id = "x'" name = l[ x ,r type = " text" > 

<label for=" y" >Y:</label> 

< input id=''y r ' name-^y" type = "text" > 

<input type = p submit " value = J| Enviar u > 

</form> 

<p id=" resuitado "></p> 

</body> 
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21 |</html > _ 

Cddigo HTML 5.12: ajax.hunt 


ArquiVO: https://github.com/KI9/K19-Exercicios/archive/k02-jquery-fixacao18.zip 


^ No projeto jQuery, crie um arquivo chamado ajax.js. 


1 

$( document). ready ( function (} f 

2 

${" input[type = J submit ' ] r ' ) . click( function () f 

3 

var x = $( JI #x r) ) . val<) ; 

4 

5 

var y = $( ,r #y") . val{) ; 

6 

$. post <” ajax . php" p f ,r x ,r : x, ,r y ,r : y}> 

7 

. done C funct ion (soma) -[ 

3 

$( J| # resultado" ) . html (soma); 

9 

)); 

10 


11 

return false; 

12 


13 

}); 

14 

}): 


Cddigo javascript 5A 48: ajax.js 


Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-jquer^-fixacao19.zip 


@ No Windows, utilize o Chrome para acessar o endere^o: 


http://loca1host/jQuery/public_html/ajax.html. 


No Ufountu, utilize o Chrome para acessar o endereqo: 


http: //localhost/~< U5UARI0>/jQuery /public_html/aj ax, html. 

/ Exercicios Complementares 


@ No projeto jQuery, crie um arquivo chamado jquery-complemeiitar,html. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 


<!DOCTYPE html> 

<html lang = ' r pt-br' 1 id= " html "> 

<head> 

<meta http-equiv=" Content-Type n content^" text/html ; charset=UTF-B" > 
<title>K19 - Eventos - jQuery </ title> 

<script src = H http : //code . jquery . com/ jquery - 1 . 10. 1 . min . js "></script > 
<script s re- 1 ' jquery - complemen tar . js Jl ></script> 

<style type = '' text /css J| > 
ftheader { 
top: Opx; 
left: Opx; 
width: 100%; 
padding: lOpx; 
position,: fixed; 
background-color : white; 
border-bottom: IQpx black solid; 
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21 

22 

23 

24 

25 

26 

27 

23 
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30 

31 
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33 

34 

35 

36 

37 

33 

39 

40 

41 

42 

43 

44 

45 

46 

47 

43 

49 

50 

51 

52 

53 

54 

55 

56 

57 

53 

59 

60 

61 

62 

63 

64 

65 

66 

67 
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71 

72 
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ffsaida { 

margin: Opx auto; 
width: SOOpx; 
height: 200px; 
overflow: auto; 

} 

ftcontent [ 

width: BOOpx; 

margin: 250px auto Opx; 

} 

pre { 

padding: lOpx; 
border-radius: 15px; 


background-color : 

} 

ffeeeeee 

#div1, 4div2 i 


background-color: 
width: 200px; 
height: 200px; 

yellow ; 

} 


#div3 { 


background-color: 
width: 50px; 
height: 50px; 
margin: auto; 

blue; 


> 

</style> 

</head> 

<body id=" body "> 

<div id = r ' header " > 

<div id= "saida r 'x/div> 

</div> 

<div id-" content ”> 

<h1>ready</hi> 

<pre id = " ready -on M > 

$( document). ready (function (} f 
var saida = $( J| #saida" ) ; 

saida.append(" evento ready disparado&lt;br&gt;” ); 

»; 

</pre> 

<h1>resize</h1 > 

< butt on i d = ■" resize H >QN</bu t ton> 

<pre> 

/* ON */ 

$(window),resize{function() { 

var largura = $(window).width{) ; 
var altura - $(window).height {) ; 

s a ida . append (" res i ze : ( ,r + largura + ", " + altura + 

saida. append ( " Sc It; br Stgt; " ) ; 

saida . scrollTop (saida . prop (*' sc roll Height ")} ; 

}); 

/* OFF */ 

$(wi ndow) , off ("resize") ; 

</pre> 

<h1>scroll</h1 > 

<button id = ' r scroll M >0N</but ton> 

<pre> 

/* ON */ 

$(wi ndow) . scroll (funct ion () ( 
var x = $(window),scrollleftQ; 
var y = $(window) . scrollTop () ; 

s a ida . append (" sc roll : (" + x + ", " + y + ")"); 
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saida, append ( "Sit;br£gt; " ) ; 

saida ■ scrollTop (saida . prop ( Jl sc roll Height ”)) ; 

}); 

/* OFF */ 

$(wi ndow) . off ("scroll 1 ’) ; 

</pre> 

<hl>focus, focusin t blur e focusout</h1> 

<button id-" foco ">0N</button> 

<pre> 

/* OM */ 

$("*").on( "focus focus in blur focusout", 
function (event) -[ 

var tag = this.tagName; 
var id = this, id; 
var type = event.type; 

saida,append(type + + tag + #" +■ id + 

s a i da . a ppe n d ( ” & 11; b r & gt ; " ) ; 

saida , scrollTop ( sa ida . prop ( ” scrollHeight")) ; 

1 

); 

/* OFF */ 

$( of f( ” focus focusin blur focusout"); 

</pre> 

<label>Teste:</label> 

<input id-"input1 "> 

<hl>select</hl> 

<button id = "select ">QN</but ton> 

<pre> 

/* ON */ 

S("ttinput2") .select(function () { 

saida.append(" select : (" + window.getSelection() + 

sa ida . append ( 11 lit; br &gt" ) ; 

saida . scrollTop (saida . prop(" scrollHeight 1 ')} ; 

}); 

/* OFF */ 

$( J| # input2 J| ) . off ( rJ select ,r ) ; 

</pre> 

<label>Teste:</label> 

<input id = "input2" > 

<h 1 >change</h1> 

<button id=” change ">QN</button> 

<pre> 

/* ON */ 

$( J| i nput3 11 ) , change (funct ion () { 

s a ida . append ( Jl change : (" + £(this).val() + r ') r '); 

saida , append ( " Silt; br &gt ; " ) ; 

saida . scrollTop (sa ida , prop ( J| scrollHeight ")} ; 

>) ; 

/* OFF */ 

$( "#inputs ") . off ( r ' change ,r ); 

</pre> 

<label>Teste:</label> 

<input id=” input3" > 

<hl>keydown, keypress e keyup</hl> 

<button id="key" >ON</button> 

<pre> 

/* ON */ 

$( '' # in put 4 J| ) . on(" key down keypress keyup", 
function(event} { 

var type = event.type; 
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sa ida , append (type ■*■ " : (" + event, which + 
saida, append ( ' r &lt; br&gt ; rJ ) ; 

saida , scrollTop (sa ida , prop ( J| sc roll Height ")) ; 

); 

/* OFF */ 

$( " # i nput.4 J| } . of f ( " keydown keypress keyup' r ); 

</pre> 

<lab el>Teste: </ label> 

<input id= H input4' r > 

<h1>click, dblclick, mousedown, mouseup, mouseenter, 
mouseleave, hover, mouseover e mouseout</h1> 
<button id = ' r mouse J| >0 H</ button> 

<pre> 

/* OH */ 

$( " #div1 J| } . on (-"click dblclick mousedown mouseup ' r + 
''mouseenter mouseleave hover mouseover mouseout' 1 , 
function(event} { 

var type = event.type; 

saida,append(type +■ ": ( r< + event, which + ”)"); 
saida, append ( ,r &lt; brkgt ; |J ) ; 

saida,scrollTop(saida,prop( "scrollHeight ")} ; 

} 

); 

/* OFF */ 

$(" #divT "}. of f ( ”click dblclick mousedown mouseup ri + 
''mouseenter mouseleave hover mouseover mouseout' 1 }; 
</pre> 

<div id="divl "><div id = '‘ div3 "></div></div> 

<h 1 >mousemove</ h 1 > 

<button id=" mousemove ">ON</button> 

<pre> 

/* on */ 

$("#div2 ,r ) . mousemove(function(event) { 
var x = event,pageX; 
var y = event,pageY; 
var type = event.type; 

s a ida, append (type + " : (" + x + ", " + y + ' r )' r ); 
saida, append ( '' Self ; br &gt ") ; 

saida,scrollTop(saida,prop ("scrollHeight")}; 

»; 

/* OFF */ 

$( "#div2 "} . off ( "mousemove p ' ) ; 

</pre> 

<div id-" div2 11 ></div> 

</div> 

</body> 

</html> 


Codigo HTML 5,13: jqiiery-comptementoKhtml 


Arquivo: https://github.com/K19YK19-Exercicio5/archive/k02-jquery-complementary . zip 


O No projeto jQuery, crie um arquivo chamado jquery-complement ar,js. 


1 

2 

3 

4 

5 


/* ready a/ 

$(document).ready( function (}( 
var saida = $(" #saida r ' ) ; 

saida,append(" evento ready disparado<br>" ); 
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/* resize */ 

var resize = false; 

$('' #res ize Jl > . cliek ( function () { 
if (resize) { 

$(window).off( " resize H ) ; 

$( pr #resize "} . html( ,r 0N ri ) ; 
resize = false; 

1 else { 

$(window). resize (function () { 

var largura = ${window).widthQ ; 
var altura = ${window).height() ; 

saida.append(" resize: (" + largura + ", " + altura + 
saida . append( "<br> H ) ; 

saida , scrol Hop (sa Ida . prop ( ” scroll Height" )) ; 

}) ; 

S( resize " ) . htral ( ,p 0FF ,r ) ; 
resize = true; 

1 

}); 

/* scroll */ 

var scroll = false; 

$( ,r # sc roll ,r ) . click( function () { 
if (scroll) i 

$(wi ndow) . off ( " scroll r ' ) ; 

$( Jl #scroll" ) . htral( ,r 0N ") ; 
scroll = false; 

} else i 

$(window).scroll( function () { 
var x = J(window).scrollLeft () ; 
var y = $( window).scrollTop () ; 
saida. append (" scroll: ( 3r + x + ", " + y + 
saida . append( "<br>") ; 

saida , scrol lTop(saida,prop( " scroll Height" )) ; 

» ; 

$("# scrol 1 " ) . html ( ,r OFF ,r ) ; 
scroll = true; 

1 

}); 

/* focus focusin blur focusout */ 
var foco = false; 

$(' r #foco") . click(funct ion() f 
if(foco) i 

$("*"}, of f (" focus focusin blur focusout' 1 ); 

$( " #foco" } . html ( " ON Pl ) ; 
foco = false; 

} else i 

$("*") . on(" focus focusin blur focusout 1 ', 
function (event) { 

var tag = th is tagName ; 

var id = this .id; 

var type = event.type; 

saida append (type + "(" + tag + ", + id + 

saida, append( "<br> 1 ’ 1 ) ; 

saida.scrollTop(saida.prop(" scrollHeight ")); 

} 

); 

$( " #f oco Jl ). html ( " OFF ,p ) ; 
foco = true; 

1 

}); 

/* select *7 

var select = false; 

$( 11 #select "} . click (function () { 
if (select) f 

$("£ input2‘") . of f ( n select '') ; 

$( " #select ) . html( ,r 0N ri ) ; 
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select = false; 

1 else i 

$( "#input2" }.select(function() { 

saida . append( " select l (" + window. getSelection() + ''>■") ; 
saida.append( "<br>" ); 

saida . scrollTop (saida .prop ("scroll Height 1 ')}; 

}); 

$( " #select 1,1 } . htral ( ,r OFF ,r ); 
select = true; 

1 

}); 

/* change */ 

var change = false; 

$( ' r #change ' f } . c 1 ick ( func t ion () { 
if(change) { 

$ ( " # i n put 3" } . o f f ( n c h a n ge ,r ) ; 

$( "#change" }. html( ,r 0N r ' ) ; 
change = false; 

} else i 

$( ,r #input 3 . change (funct ion () { 

saida.append(" change : (" + $(this).val() + r ') r! ); 
saida . append( "<br>") ; 

saida . scrol Hop (sa ida . prop ( "scrollHeight ")) ; 

}) ; 

$("#change " } . html( ,r OFF ,r ); 
change = true; 

1 

}); 

/* key */ 

var key = false; 
i("#key ").click(function (} f 
if(key) { 

$( " #input4 ,r ) . of f ( rj key down keypress keyup' r ); 

$( Jl #key " ) . html ( "ON Ir ) ; 
key = false; 

J- else { 

$( " # i nput4 " ) . on ( ,r key down keypress key up", 
f unction (event) { 

var type = event,type; 

saida.append(type + (" + event.which + 

saida.append( "<br>") ; 

saida. scrollTop (saida.prop("scrollhieight r ')}; 

); 

$(' r #key") . html ("OFF") ; 
key - true; 

1 

}); 

/* mouse */ 

var mouse = false; 

$(" #mouse" ).click(function(} { 
if(mouse) f 

$( ' r #div1 "} . of f{ " click dblclick mousedown mouseup r ' + 
"mouseenter mouseleave hover mouseover mouseout' 1 ); 

$( " £mouse" ) , html ( ,! ON ,r ); 
mouse = false; 

J else i 

$(' r #divl ,r ). on ("click dblclick mousedown mouseup ,r + 
"mouseenter mouseleave hover mouseover mouseout", 
f unction (event} { 

var x = event.pageX; 
var y = event.pageY; 
var type = event,type; 

sa ida. append (type + ": (" + x + " , ' r + y + ,r }' r ); 
saida.append( "<br>") ; 
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saida . sc rolltop (sal da . prop (' r scroll Heigh t ")) ; 

} 

); 

$( J| If mouse " ) . html ( ri OFF r ' ) ; 
mouse = true; 

1 

}); 

/* mousemove */ 

var mousemove = false; 

$("# mousemove |J ). click (function () { 
if (mousemove) { 

$( J| #di v2 . of f ( |J mousemove” ) ; 

$( J| £mousemove |J ) , html ( r, ON Ir ) ; 
mousemove = false; 

} else i 

$("#div2' r ) a mousemove ( fun ct ion (event) { 
var x - event,pageX; 
var y = event.pageY; 
var type = event.type; 

saida,append(type + p : (" + x + ”, ,f + y + lf ) ,r ); 
saida ,append( "<br>") ; 

saida , scrol Hop (sa ida . prop ( ,r scroll Height" )) ; 

}) ; 

$( ,r £mo use move" ) . html ( r ' OFF" ) ; 
mousemove = true; 

1 

}); 

}); 


Cddigo javascript 5.149: jquerycamplementa r.js 


Arqutvo: https://github.com/K19/K19-Exercicios/archive/k02-jquery-complementar2.zip 


0 No Windows, utilize o Chrome para acessar o endere^o: 

http://localhost/jQuery/public_html/jquery-complementar.html. 

No Ubuntu, utilize o Chrome para acessar o endere^o: 

http://localhost/-<USUARIO>/j Que ry/public_h tml/jquery-compleme ntar.html. 

Resumo do Capitulo 


Resumidamente. jQuery e uma biblioteca JavaScript. 

► Podemos obter a biblioteca jQuery na versao compressed ou uncompressed. 


A utilizagao de uni CDN (Content Delivery Network), melhora o tempo de carregamento e a 
disponibilidade da biblioteca jQuery. 


► 


O metodo on{) per mite associar event os jQuery aos elementos HTML. 
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► 

que 

► 


O metodo off{) permite dissociar eventos jQuery dos elementos HTML. 

A bibliotecajQuery suporta todos os seletores do CSS. Alem disso, ela oferece alguns seletores 
nao existem no CSS. 

Podemos definir o tempo de dura^ao dos efeitos e animacoes do jQuery. 

Podemos determinar uma funcao que deve ser executada ao termino de um efeito ou anima- 


Cao. 




A biblioteca jQuery oferece muitos recursos para a manipulaqao dos elementos HTML. 


O Prova 


| Qual alternativa esta correta? 

a) jQuery e uma biblioteca JavaScript. 

b) jQuery e uma biblioteca HTML. 

c) jQuery e uma biblioteca CSS, 

d) jQuery e uma linguagem de programaqao. 

e) To das as alternativas ant erlores estao incorretas. 

| Qual alternativa esta correta? 

a) Geralmente, a utiliza^ao de CDNs aumenta a quantidade dados transmitidos entre os navega- 
dores e os Web Servers. 

b) Geralmente, a utilizagao de CDNs diminui a disponibilidade do conteudo. 

c) Geralmente, a utilizacao de CDNs aumenta a latencia na transmissao de dados para os nave- 
gadores. 

d) Geralmente, a utilizacao de CDNs aumenta a seguranca dos sites e das aplicacao web. 

e) Geralmente, a utilizacao de CDNs diminui o tempo de carregamento das paginas web. 

| Quais alternativas estao corretas? 
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a) Podemos ufilizar o metodo on() para adicionai os tratamentos dos eventos. 

b) Podemos utilizar o metodo enable{) para determinar os tratamentos dos eventos. 

c) Podemos utilizar o metodo event(} para adicionar ou eliminar os tratamentos dos eventos. 

d) Podemos utilizar o metodo off() pars eliminar os tratamentos dos eventos. 

e) Podemos utilizar o metodo disable0 pars eliminar os tratamentos dos eventos. 

| Qual alternativa esta correta? 

a) jQuery suporta apenas os seletores do CSS. 

b) jQuery nao suporta todos os seletores do CSS. 

c) jQuery nao suporta nenhum seletor CSS. 

d) jQuery suporta todos os seletores do CSS. 

e) To das as alternativas anteriores estao incorretas. 

| Qual alternativa esta correta? 

a) fadeOn, fadeOff sao efeitos do jQuery. 

b) slideLeft e slideRight sao efeitos do jQuery. 

c) hide e show sao efeitos do jQuery. 

d) jQuery nao possui efeitos. 

e) Todas as alternativas anteriores estao incorretas. 

| Quais alternativas estao corretas? 

a) O metodo emptyQ remove o conteudo dos elementos selecionados. 

b) O after adiciona conteudo imediatamente depois dos elementos selecionados. 

c) O before adiciona conteudo imediatamente antes dos elementos selecionados. 

d) O addClass adiciona uma ou mais classes aos elementos selecionados. 

e) O clone cria uma copia dos elementos selecionados. 

| Qual alternativa esta correta? 
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a) A utiliza^ao do AJAX elimina o codigo JavaScript. 

b) jQuery oferece diversos recursos para a utilizagao do AJAX. 

c) O principal objetivo do AJAX e facilitar a utilizacao do CSS. 

d) AJAX e urn a biblioteca JavaScript. 

e) O nome AJAX foi inspirado no clnbe de futebol holandes. 


Minha Pontuacao 


Pontuacao Minima: 



Pontuacao Maxima: 
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Projeto 


a 

2 

iU 


A 


Para exercitar o conteiido vista nesta aposfila, iniplemete lima pagina web semelhante a imagem 
a seguir. 


K19 Blog 


Awnee as f&&>? 
<fs urn ;« jo no 


Lorem ipsum dolor SJt 0 

pw Jdei-bs rtiraia 


icmam ipcum dotor ail 
ainet, eonaectelur 
adi piscifig iiii Maecenas. 
canvatlH vrwerrfl justo sed 
ad* pisci-r g. Maecsnaa 
vitae arcu lectuE.. 

Pracsent deifend sspwn 
rt consequwt uHjricias, Donee variu-5, l» a 
G>ndimeAtiim porta, quam rone* l&bonts 
nveius, c&neeeteiur posuere e*im metos 
vitae lorem. In len^por gravida arcu in 
saltioiludin. hullam moleslre, sem vitae 
volutpst porta, hgula torlcf pralium dram, 
sed adipiscing inagna masaa ut nisE. 
Pallentasq->e congue nisi vehiculaleo 
tinetdunt ultricres. 


GornwHBr f Exit* comentdrioa 


o 


Smartphone 


o o o 


<=> 

r«T*ii 

i a 

■> 


K19 Blog 




Lorem i psum deter sit 0 

pot JgpRB HI rati 




VWDkW 


Lorem ipeinn dolor an am at, wnsectetrir adipsdngelic. Maecenas 
(xmvalli&vivflfrjijutfg 5ml atfifliacinn Mwcenaa vitae anew leaua 
Pisescn! elciFend sap en el canscquat ulHc«s. Donee vorits.. ieo a 
ccndimenLuni uij:"a, quin tartar loboilis rrreLuT-. mnnnK.L«Ldr 
flosuereenim m«ue vita# lorem intempor nresidBaraj in 
sellicliMP in NuHam mrfeHie. setn vitas volutpst poda. :^gln tPlor 
pretiumdinm, aed adtsiseng irmgria maaanut nisi. Pcllenlcsn jc 
■Dengue nist vahitiilafeHlncidiini derides. 


Deixe o seu. CQm&nfcSrio 


I E-ma^ 


Jijn?s Hirisra 

PYataont dferFrcid egestgs vpbjtpat Qui^qua quis tcrlur in sdio 
adipiscirig cqearaa sjl H'nei uC nisi. Vivamua vEnendis 1 urpi a id 

nlal raaiiiia. &ed Cdraus aditr soelerlacj-iie 


* JaAeina 2013 

* ftvErebmMlO 

- MWflO 21)13- 

* Abril 20T 3 

- WatoZIHS 

■ Junho 2015 

■ 

* Agoald jJU 

' QAtMlWbZfllZ 
» Ouiubro aoia 
»■ ttavEmbra itH! 

- Dfiifeli&ia 2E1D 


Desktop 


( j'" Exercicios de Fixacao 


^ Abra o Netbeans e crie urn projeto chamado blog. 
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Importante 

No Windows, utilizando o IIS (Internet Information Services) como Web Server, voce 
deve salvar o projeto blogem C:\inetpub\wwwroot. Lembre-se que e necessario ins- 
talar o IIS confer me vimos anterior mente. 


Importante 

No Ubuntu, utilizando o Apache HTTP Server como Web Server, voce deve salvar o 
projeto blog em /honre/<USUAIUO>/public_html. Lembre-se que e necessario ins- 
talar e configurer o Apache HTTP Server como vimos anterior mente. 



Figurn A. 1 : Projeto blog 
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PROJETO 



FigumA.2: Projeto blog 



Arquivo: https://github.com/K19/K19-Exercicios/archive/k02~projeto-fixacaol . zip 


0 No projeto blog, altere o arquivo index*html. 
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<!DQCTYPE html> 

<html> 

<head> 

<title>K19 Blog</title> 

<meta http-equiv = JI Content-Type" content^ 1 '' test/html ; charset=UTF-8" > 

<meta name=" viewport" con tent = r 'width = de vice -widt h " > 

<1 ink rel = r# stylesheet 1,1 type- 1 ' text/css" href= r ' css/principal . css "> 

<scri pt ty pe = 11 text/ ja vase rip t'' src= ,r http : / / code . j query . com / j query -2.0,3. min 
</script > 

<scr ipt ty pe = ,r text / javascript 71 src = " j s/principal . js " ></scr ipt> 

</ head> 

<body> 

<div id = r ' main -wrapper J| > 

<header id = "main-header " > 

<h1>K19 Blog</h1> 


js 


> 


<nav> 

<input id= "main-menu-btn " type = il but ton" value=" Menu " > 


<ul> 

<li><a href = r 'tf ">Hoine</ax/li> 
<liXa href = '■ # r >Arquivo</a></li> 
<liXa href = lf # ">5obre</ax/li> 
</ul> 

</nav> 

</header> 


< se c tion id- r ’articIes-container J| > 

<! — 

Quando o DIV abaixo estiver na area visivel da 
um conjunto de posts sera carregado via AJAX. 

- -> 

<div id =" lazy - load -point "x/div> 

</section> 


pagina 


<aside> 

<sect ion id=" archive - links rJ > 

<header> 

<h1 >Arquivo</hi> 

</header> 

<ul> 

<li><a href ="#"> Janeiro 2Q13</aX/li> 
<lixa href= l, # B >Fevereiro 2013</ax/li> 
<li><a href= B # ”>Mar^o 2013</aX/li> 
<li><a href = r '# ">Abri 1 2013</ax/Ii> 
<lixa href="# w >Maio 2013</a></li> 
<li><a href = lp #">Junho 2013</a></li> 
<liXa href="#'XJulho 2013</aX/li> 
<li><a href=">Agosto 201 3</a></li> 
<lixa href = l '# ">£etembro 201 3</a></li> 
<lixa href ="# H >Outubro 2013</aX/Li> 
<li><a href="# ,, >Novembro 201 3</a></li> 
<lixa href 17 >Dezembro 201 3</a></li> 
</ul> 

</section> 

</as ide> 


<footer> 

<small>&copy; K19 Treinamentos 2013.</small> 
</footer> 

</div> 

</body> 

</htmI> 


Ctidigo HTMLAJ: index Jit ml 


t]UiU0: https://github,com/K19/K19-Exercicios/archive/k02-projeto-fixacao2.zip 
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PROJETO 


No projeto blog ? crie um arquivo chamado principal, css em am a pasta chamada css. 


/* Dec laran do as fontes que serao utilizadas na pagina. */ 
efont-face { 

font-family: ’Roboto'; 

src: url( 3 Roboto-Regular-webfont,eot'); 

src: url( 3 Roboto-Regular-webfont.eot ?#iefix 3 ) format( 3 embedded-opentype'}, 

url ( r Roboto - Regular - webfont. woff ') format ( r woff 3 ) 

url ( r Roboto - Regular - webfont, ttf 3 ) format ( 3 truetype ') p 

url (' Roboto - Regular - webfont. svgflRobotoRegular 3 ) format ( 3 svg 3 ) ; 

font-weight: normal; 

font-style: normal; 


efont-face { 

font-family: 3 Roboto'; 

src: url( 3 Roboto-Italic-webfont.eot 3 ); 

src: u rl{ 3 Roboto-Italic-webfont„eot ?#iefix') format('embedded-opentype')„ 

url (' Roboto -Italic-webfont, woff 3 ) format( 3 woff ') p 

url('Roboto-Italic-webfont.ttf') format (' t ruetype 1 ) , 

url ( r Roboto - Ital ic - webfont . svg# Roboto I talic 3 ) format ( 3 svg 3 ) ; 

font-weight: normal; 

font-style: italic; 


@font-face f 

font-family: ’Roboto'; 

src: url{ 3 Roboto-Bold-webfont.eot 3 ); 

src: url( 3 Roboto-Bold-webfont.eot 7#iefix') format( 1 embedded-opentype'), 

url (' Roboto-Bold-webfont.woff 3 ) format( 3 woff ') p 

url( r Roboto-Bold-webfont.ttf') format( f t ruetype 3 ), 

urlC'Roboto-Bold-webfont,svg#RobotoBold 1 ) format{ 3 svg 1 ); 

font-weight: bold; 

font-style: normal; 


@font-face { 

font-family: 'Roboto'; 

src: url( 3 Roboto-Boldltalic-webfont.eot 3 ); 

src: url( 3 Roboto-Boldltalic-webfont.eot7#iefix') formatf'embedded-opentype'), 

url('Roboto-BoldItalic-webfont,woff 3 ) format( 3 woff ' ) p 

url('Roboto-BoldItalic-webfont.ttf') formatC'truetype 1 ) 3 

url('Roboto-Boldltalic-webfont.svg#RobotoBold!talic 1 ) format( 3 svg 3 ); 

font-weight: bold; 

font-style: italic; 


@font-face f 

font-family: 3 Roboto'; 

src: url( 3 Roboto-Thin-webfont.eot 3 ); 

src: url( 3 Roboto-Thin-webfont.eot ?#iefix') format( r embedded-opentype') p 

url('Roboto-Thin-webfont.woff 3 ) format( 3 woff') p 

url( r Roboto-Thin-webfont.ttf') format('truetype 1 ), 

url('Roboto - Thin-webfont.svg#RobotoTbin 3 ) format( 3 svg 1 ); 

font-weight: 200; 

font-style: normal; 


@font-face f 

font-family: T Roboto'; 

src: url( 3 Roboto-Thinltalic-webfont.eot 3 ); 

src: url( 3 Roboto-Thinitalic-webfont.eot?#iefix') format C f embedded-opentype') p 

url('Roboto - Thinltalic-webfont,woff 3 ) format( 3 woff ') p 

url('Roboto-Thinitalic-webfont.ttf') format('truetype 3 ), 

url('Roboto-Thinitalic-webfont.svg#RobotoThin!talic 3 ) format( 3 svg 3 ); 

font-weight: 200; 

font-style: italic; 


Sfont-face f 
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font-family: "Roboto'; 

src : url('Roboto-Light-webfont.eot ') ; 

src: uri('Roboto-Light-webfont.eot ?#iefix J ) format('embedded - opentype"}, 

url( r Roboto-Light-webfont.woff') format ( f woff"), 

url ( f Roboto - Light - webfont.t tf ") format ( J truetype ') , 

url ( r Roboto -Light-webfont.svg#RobotoLight J ) format('svg’); 

font-weight: 100; 

font-style: normal; 


©font-face C 

font-family: "Roboto'; 

src: url('Roboto-Light Itali c-webfont.eot'); 

src: url(' Roboto-LightItalic-webfont.eot?#iefix 1 ) format(’embedded - opentype 1 }, 

url(' Roboto-Lightltalic-webfont.woff') formatt r woff "), 

url( r Roboto-Lightltalic-webfont.ttf ") format(" truetype ') p 

url( r Roboto-Lightltalic-webfont.svg#RobotoLightItalic") format(' svg "}; 

font-weight: 100; 

font-style: italic; 


©font-face f 

font-family: "Roboto'; 

src: url("Roboto-Medium-webfont.eot"); 

src: url{"Roboto-Medium-webfont.eot?#iefix') format ( f embedded-opentype') p 

url( r Roboto-Medium-webfont . woff ") format(" woff ') p 

url( f Roboto-Medium-webfont,ttf') format £ f t ruetype"), 

url { r Roboto -Medium-webfont,svgffRobotoMedium ") format('svg 3 ); 

font-weight: 300; 

font-style: normal; 


©font-face f 

font-family: ’Roboto'; 

src: url { 3 Roboto-Mediumltalic-webfont.eot 3 ); 

src: url{ 3 Roboto-Mediumltalic-webfont.eot?#iefix') format("embedded-opentype') p 

url( r Roboto-Mediumltalic-webfont,woff 3 ) format( 3 woff') p 

url ( r Roboto-Mediumltalic-webfont.ttf') formatC'truetype 3 ), 

url( r Roboto-Mediumltalic-webfont.svgftRobotoMediumltalic 3 ) format(’svg 1 }; 

font-weight: 300; 

font-style: italic; 

1 

/* 

Removendo as margens internas e externas de todos os elementos para 
evitar diferengas entre os navegadores. 

*/ 

* { 

margin: 0; 
padding: 0; 

font-family: "Roboto', "helvetica 3 , r arial r , "sans-serif'; 

} 

©media (max-width: 480px) { 
body i 

font-size:1.2rem ; 

1 


.show-comments { 
display: inline; 

} 


.article-comments form h 
.article-comments article { 
display: none; 

} 


©media Cmin — width: 640px> { 
ftarticles-container { 
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width: 70%; 
float: left; 


aside { 

width: 28%; 
float: left; 
margin: 0 0 0 2%; 


.article-comments form r 

.article-comments article { 
display: block; 

1 

#main-header nav { 

display: inline-block; 
vertical-align: middle; 

} 

#main-header nav input:first-chiId £ 
display: none; 

1 

#main-header nav ul, 

#main-header nav li £ 
display: inherit; 
vertical-align: inherit; 

} 

ftmain-header nav ul { 
margin: 000 4em; 

1 

#main-header nav li { 
background: white; 
border-radius: 0.3em; 
padding: 0,3em 0.5em; 
font-size: O.Sem; 
margin: 0 0,5em; 
color: black; 

#main - header nav li a { 
color: inherit ; 
text-decorat ion: none; 

1 

#main-header nav li:hover { 
background: #33c3f2; 
color: white; 

1 


.article-text figure £ 
margin-bottom: 1em; 

.article-text figure img £ 
width: 100%; 

} 

.article-text figure figcaption { 
font-size: O.Sem; 
font-style: italic; 
text-align: center; 

1 

} 

©media (min-width: 4B0px> { 

body £ 
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211 
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214 
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221 
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229 
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231 

232 

233 

234 

235 
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237 

233 
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241 
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244 
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253 
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255 
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266 
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font -size : 1 . 5 rem ; 

} 

. show-comments f 
display: none; 

} 


@media (max-width: 640px) { 

#main-header nav i 
position: absolute; 
top: 1em; 
right: 0.5em ; 
text-align: right; 

#main-header nav input:first-chiId { 
background: white; 
border-radius: 0.3em; 
border:none; 
padding: 0.3em 0.5em; 
font-size: O.Sem; 
margin: 0 0 0- 1em 0; 
cursor: pointer; 

} 

#main-header nav input:first-chiId:hover f 
color: #3Sc3f2 ; 

} 

#main-header nav ul { 
display: none; 
border-radius: 0.3em; 
background: white; 
list-style-type: none; 
padding: 0.6em; 

box-shadow: 3px 3px lOpx rgba(0, 0 r 0, 0.3); 

1 

#main-header nav li £ 
text-align: left; 
padding: 0.3em; 
color: black; 

1 

#main-header nav li a £ 
color: inherit; 
text-decorat ion: none; 

} 


1 


#main-header nav 1 
color: #38c3f2; 

1 

.article-text figu 
float: left; 
margin: 0 0.6em 
width: 5em; 


.article-text figu 
width: 100%; 

} 

.article-text figu 
font-size: 0.7em 
font-style: ital 
text-align: cent 


i:hover £ 


re i 

0.6 em 0; 


re img £ 

re figcaption 

ic ; 
er ; 




£ 
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231 

232 

233 

234 
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290 

291 
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294 
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296 

297 

293 

299 

300 

301 

302 

303 

304 

305 

306 

307 

303 

309 

310 

311 
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313 
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315 

316 

317 

318 

319 
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321 
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323 
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328 

329 
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332 

333 

334 

335 

336 

337 

333 

339 

340 

341 

342 

343 

344 

345 

346 

347 

343 

a 


PROJETO 


ttiraain-wrapper ( 
max-width: 980px; 
width: 100%; 
margin: 0 auto; 


#main-header i 

position: relative; 
background: black; 
padding: O.Sem; 


#main-header hi { 
color: white; 
font-size: 1.5em ; 

display: inline-block ; 
vertical-align: middle; 


rticle ih 

eader 

f 

background: 

#38 c3f2; 

color: 

white 

f 

padding 

: 0.3 

em; 

rticle h 

eader 

hi { 

font-si 

ze: 1 

. 2em ; 

rticle h 

eader 

h2 { 

font-si 

ze : 0 

. Sem ; 

font-we 

ight: 

normal; 

article- 

text 

( 

padding 

: 0.3 

em ; 

article- 

text 

P { 

font -si 

ze : 0 

. Sem ; 

margin - 

bottom: O.Sem; 

archive - 

1 inks 

header { 


background: #883; 
color: white; 
padding: O.Sem; 

} 

#archive-1inks header hi i 
font-size: 1 em ; 

1 

#archive-1inks ul { 

padding: O.Sem 0 O.Sem 1.6em; 
color: #338; 
font-size: O.Sem; 

} 

#archive-1inks li { 
padding: 0.2em 0; 

} 

ttarchive-Iinks li a ( 
color: inherit ; 
text - decorat ion : none; 

} 

#archive-1inks li a:hover { 
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365 

366 
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369 
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371 
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373 
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376 

377 

373 

379 

330 

331 

382 

333 

334 

335 

386 

387 

333 

339 

390 

391 

392 

393 

394 

395 
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397 

393 

399 
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401 

402 

403 

404 
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413 
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color: #3Sc3f2; 


.article-comments { 
padding: 0 O.Sem; 

} 

.article-comments > input:first-child { 
border: none; 
background: #Q0c425; 
color: white; 
font-size: O.Sem; 
padding: 0.3em 0.5em; 
cursor: pointer; 
margin: 0 0 2em 0; 


.article-comments fieldset f 
border: 1px solid #999; 
padding: O.Sem; 
text-align: right; 
margin: 0 0 1em 0; 


.article-comments fieldset legend { 
padding: 0 0.2em; 
color: #999; 

1 


input:not([type= 
textareaf 


submit ’ ]) „ 


f submit ' ] { 


.article-comments fieldset 
.article-comments fieldset 
display: block; 
font-size: O.Sem; 
margin: 0 0 0.5em 0; 
width: 100%; 
border: 1px solid #999; 
padding: 0.2em; 


.article-commonts fieldset textarea { 
height : 1Oem ; 

1 

.article-comments fieldset input[type= 
border: none; 
background: #00c425; 
color: white; 
font-size: O.Sem; 
padding: 0.3em 0.5em; 
cursor: pointer; 


.article-comments article { 
margin: 0 0 Iem 0; 


.article-comments article p { 
font-size: O.Sem; 
color: #444; 
margin: 000 lem; 

#lazy-load-point { 
height : 24px; 

1 

#lazy-load-point.loading i 

background: url£ r ajax-loader') no-repeat center; 

1 
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footer { 

text-align: center; 
clear: left; 

} 

footer small { 

font-size: 0.5em ; 

} 


Cddigo CSS AJ: principal, css 


AnjlliVO: https://github, cofn/K19/K19-Exercicios/archiveZk02-projeto-fixacao3.zip 


o 


No projeto blog, crie um arquivo chamado servico.php. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 

41 

42 

43 

44 

45 

46 

47 

48 

49 

50 

51 

52 


<?php for (Si = 0; $i < 3; $1++}: 7> 

<article> 

<header> 

<hl>Lorem ipsum dolor sit <?php echo Si ?></hl> 

<h2>por Jonas Hirata</h2> 

</header> 

<div class="art icle - text "> 

<figure> 

<img 

src = " img/ paisa gem . jpg J| 
title=" Paisagem ' r 

alt= " Arvores ao re dor de um la go no outono"> 

<figcaption>Arvores ao redor de um lago no outono</figcaption> 
</figure> 

<p> 

Lorem ipsum dolor sit amet f consectetur adipiscing elit. 
Maecenas convallis viverra justo sed adipiscing, 

Maecenas vitae arcu lectus. Praesent eleifend sapien et 
consequat ultricies. Donee varius , leo a condimentum 
porta, quam tortor lobortis metus, consectetur posuere 
enim metus vitae lorem. In tempor gravida arcu in 
soilicitudin . NuLlam molestie, sem vitae volutpat 
porta, ligula tortor pretium diam, sed adipiscing ritagna 
massa ut nisi. Pellentesque congue nisi vehicula leo 
tincidunt ultricies, 

</p> 

</div> 

<d iv class-” article - comments l * > 

<input 

c1ass = w show-comments" 
type =" button r " 

value = '* Comen tar / Ex ibir comen t ar i os "> 

<form> 

<fieldset> 

<legend>Deixe o seu comentario</legend> 

<input type = "text" placeholder^' 1 Nome "> 

<input type = " email " piacetiolder = ,J E-mai 1 " > 

<textarea placeholder=" Comentarios "></textarea> 

<input type= H submit " value =”Enviar "> 

</fieldset> 

</form> 


<small>Jonas Hi rata </ sma 
<P> 

Praesent eleifend eges 
tortor ut odio adipisc 
nisi. Vivamus venenati 
facilisis, sed cursus 


11> 




tas 

volutpat 

. Quisque 

d 

ing 

egestas 

sit amet 

ut 

s tu 

rpis id 

nisi 


odio 

sceleri 

sque . 
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53 

54 

55 

56 

57 


</p> 

</article> 
</div> 
</article> 
<?php endfor; ?> 


Codigo HTMLA2: seruico.php 


ArquiVO: https://github.com/Kl^/KIS-Exercicios/archive/kOS-jquery-fixacao4.zip 


0 No projeto blog, crie um arquivo chamado principal, js em uma pasta chamada js. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 

43 

44 

45 

46 

47 

48 

49 

50 

51 

52 

53 

54 

55 


var scrollTimeout = 0; 

var isLoadingArticles = false; 

$(document).ready (function (} £ 

$( ■' #articles - container 3 ), on ( p cl iek F , 3 . show-comment s f , function (e) { 

$( this ) . parent () . find( 3 form , article r ) , slideDownQ; 

$( this ).hide (} ; 

}); 

// Trata o evento de clique no botao de menu adicionando uma classe 
// ao mesmo para indicar que o mesmo esta expandido, 

${ 3 #main-menu - btn r ).click( function (e) £ 
e,stopPropagation(); 

$( thi s ) . parent(), find( 3 ul 3 ) ,addClass( 3 expanded 1 ) . si ideDown(}; 

}); 

// Trata o evento de clique em qualquer area da pagina para contrair e 
// remover a classe expanded do menu principal . 

${ 3 html p ),click(function(e) £ 

$( 1 #ma in - header ul , expanded 3 ). removeClass ( r expanded 3 ). slidellp (400 f function^) £ 
$( this ),removeAttr( p style 3 ); 

}); 

}); 

S(window),scroll( function () £ 

// Utilizando um timeout para evitar chamadas excessivas 
// a funpao afterScrollQ . 
clearTimeout(scrollTimeout); 

scrollTimeout = setTimeout(afterScroll f 500); 

}); 

// Carregando os artigos assim que a pagina for carregada. 
loadArticles Q; 

}); 

function afterScroll() £ 

if (! i sLoadingArt i cles && ${ p #lazy - load-point. 3 ) . i sOnScreen (}) £ 
loadArticles(); 

} 

1 

function loadArticles() £ 

S.ajax (£ 

url: ' service,php 3 , 

dataType: 'html 3 , 

beforeSend: function (jqXHR f settings) £ 
isLoadingArticles = true; 

N Exibe o GIF animado que indica o carregamento 
$( 3 #lazy-load-point p ).addClass( 3 loading 3 ); 

complete: functionQ £ 

// 0 uso do timeout neste ponto e desnecessario . 

// para dar tempo do GIF animado ser visualizado 
// local, 


do conteudo. 


Foi utilizado aqui 
em um servidor 
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56 

57 

58 

59 

60 
61 
62 

63 

64 

65 

66 

67 

68 

69 

70 

71 

72 

73 

74 

75 

76 

77 
73 
79 
SO 
81 
82 
33 

84 

85 

86 

87 

88 
39 

90 

91 

92 

93 

94 

95 

96 


setTimeout(function () { 

isLoadingArticles = false; 

// Oculta o GIF animado que indica o carregamento do conteudo. 

S( '#lazy - load-point p ).removedass( 'loading r ); 

1000 ); 

success: function(data f textStatus, jqXHR) f 

// O uso do timeout neste ponto e desnecessario . Foi utilizado aqui 
// para dar tempo do GIF animado ser visualizado em um servidor 
// local. 

setTimeout(functionQ ( 

$( articles - container ").prepend(data); 

1, 10 00 } ; 

1, 

error: function(jqXHR, textStatus, errorThrown) ( 
alert(errorThrown); 

1 

}); 

} 

// Extendendo o jQuery com o metodo isQnScreen que verifica se um 
U elemento esta na regiao visivel da pagina. 

% ,fn.isOnScreen = function() f 
var win = $(window) ; 

var viewport = i 

top: win.scrollTop() , 
left: win.scrollLeft() 

}; 

viewport.right = viewport.left + win.width() ; 
viewport.bottom = viewport.top + win.height () ; 

var bounds = fhis.offset{) ; 

bounds.right = bounds.left + tbis . outerWidth() ;, 
bounds.bottom = bounds.top + this.outerheight () ; 

return (!(viewport.right < bounds.left || 
viewport.left > bounds.right j| 
viewport.bottom < bounds.top || 
viewport.top > bounds.bottom)); 


Godigo Javascript A1: principaljs 


Arquivo: https://github.coin/K 1 9/K19-Exercicios/archive/k02-projeto-fixacaoS.zip 


@ Copie o arquivo k02-pro jeto.zip da pasta K19-Arquivos para a sua Area de trabalho, Descom- 
pacte esse arquivo e copie o conteudo das pastas css e img para as pastas css e img do projeto blog 
re sp ecti vainente. 

O arquivo k02-projeto.zip tambem estadispomvel em http: //kl 9. com. br/arquivos. 

Arquivo: https://github.com/KlS/KI9-Exercicios/archive/kG2-projeto-fixacao6.zip 


Q 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/blog/public_html/index.html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


http://loca1host/'< U5UAR IG>/blog/public_html/index.html. 
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Quizzes 



Quiz 1 

Considere uma p agin a HTML contendo um <div> com largura (width) 2G0px, marge ni 
interna (padding) IQpx e borda de 3px, Visualmente, qual e o espaqo horizontal ocupado por 
esse elemento? 

a) 20Qpx 

b) 203px 

c) 210px 

d) 213px 

e) 226px 

De acordo com o Box Model do CSS visto no Capitulo 3, ao atribuirmos margens internas e bor- 
das em um elemento com largura definida fazemos com que, visualmente, a largura ocupada por 
esse elemento seja a soma das propriedades width, pad ding-left, padding-right, border- 
left e border-right. Como utilizamos a propriedade padding com o valor lOpx para definir 
as margens internas, podemos considerar que temos lOpx nas propriedades padding-left e 
padding-right. A mesma ideia se aplica a propriedade border, portanto temos border-left 
e border-right com 3px cada, 

Fazendo a soma temos; 2GGpx (width) + lOpx (padding-left) + lOpx (padding-right) +3px (border- 
left) + 3px (border-right) = 226px 

Portanto o espaqo horizontal visualraente ocupado pelo elemento e de 226px. 
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Respostas 



Questao 1,1 


d 


Questao 1,2 


e 


Questao 1,3 


a 


Questao 1,4 


c 


Questao 1,5 


d 


Questao 1.6 


d 


Exerricio Complementar 2.1 


1 <!DOCTVPE html > 

2 <htm 1 lang = ' r pt-br'' > 

3 <head> 

4 <meta http-equiv = " Con tent-Type" content^ 1 2 3 4 5 6 7 8 9 10 11 ' test/html ; charset=UTF-8 " > 

5 <title>K19 Treinamentos</title> 

6 <7head> 

7 

8 <body> 

9 <p> 

10 Lorem ipsum dolor sit amet r conseotetur adipiscing elit, Susperrdisse 

11 bibendum pellentesque hendrerit. Aliquam pretium, quam in porttitor 
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12 

13 

14 

15 

16 


vestibulum t roassa ligtila sodales met us r nec hendrerit nunc purus eu 
mauris. 

</p> 

</body> 

</html> 


Cddigo HTML 2.159: pagina-simples.html 


No Windows, utilize o Chrome para acessar o endere^o: 


http: /./local host/html/public_html/pagina-simples . html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //local host/~<USUARIG>/html/public_htiiil/pagi na-simples, html. 

Arquivo: https://github. com/KlS/KI9-Exercicios/archive/k02-html-complei!ientar1, zip 


Exercfcio Complement ar 2.2 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 
33 

39 

40 

41 

42 


<!DOCTYPE html > 

<html lang = jr pt-br"> 

<head> 

<meta http-equiv = J| Content-Type " content-" test/htmlcharset=UTF-8 " > 
<title>Curiosidades do Mundo</1 itle> 

</head> 


<body> 

<h1>Curiosidades do Mundo</hl> 

<h2>Europa</h2> 

<p>A Europa e o segundo manor continente em superficie do mundo, cobrindo 
cerca de 10 130 000 qui lontet ros quadrados ou 2% da superficie da Terra 
e cerca de 6,8% da area acima do nivel do ntar,</p> 

<h3>Alemanha</h3> 

<p>Com 31 3 8 milhdes de habitantes em Janeiro de 2010 ., o pais tern a maior 
populagao entre os Estados membros da Uniao Europeia e e tambem o lar da 
terceira maior popula^ao de migrantes internacionais em todo o mundo.</p> 

<h4>hesse</h4> 

<p>A capital e Wiesbaden e a maior cidade Francoforte do Meno (Frankfurt 
am Main), onde esta localizado urn dos maiores aeroportos do mundo e um 
centre financeiro de grande importancia.</p> 

<h5>.f rankf urt</h5> 

<p>Frankfurt am Main ou Francoforte do Meno, mais conhecida simplesmente como 
Frankfurt, e a maior cidade do estado alentao de Hesse e a quinta maior cidade 
da Alemanha , com uma popula^ao 700.000 habitantes em 2012.</p> 


<h2>Asia</h2> 

<p>A Asia e o maior dos continentes, 


tanto em area como em popularao.</p> 


<h3>Japao</h3> 

<p>G pais e um arquipelago de 6 352 ilhas , cujas quatro maiores sao Honshu, 
Hokkaido, Kyushu e Shikoku, representando em conjunto 97% da area 
terrestre nacional.</p> 


<h4>Gkinawa </h4> 

<p>Antigamente, Okinawa fazia parte de um reino independente, o reino Ryukyu, 
o que foi decisive para o desenvolvimento de uma cultura propria do desenrolar 
de uma historia particular e sign ificativamente diferenciada do resto do 
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Japao.</p> 

<h5>Nago</h5> 

<p>De 21 de julho ate 23 de julho de 2000, foi sede do encontro anual do GB,</p> 

<p>Fonte: wikipedia.org</p> 

</body> 

</h tml> 


Codigo HTML 2.166: geografiaJitml 


No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/htnil/publicjrtml/geografia.html. 

No Ifbuntu, utilize o Chrome para acessar o endereco: 


http://localhost/^<U5UARIG>/html/public_html/geografia.html. 

Arqidvo: https: //github . com/Kl9/K19-Exercicios/archive/kG2-html-cofnplementar2.zip 


Exerdcio Complementar 2.3 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 


<!DOCTYPE html> 

<html lang = jr pt-br"> 

<head> 

<meta http -equi v= ,r Con tent -Type" content-" test /html ; charset=UTF -S " > 

<title>Seguro Treinamento - K19</title> 

</head> 

<body> 

<h1>Na K19 o aluno faz o curso quantas vezes quiser!</h1> 

<p> 

Contpromet ida com o aprendizado e com a satisfagao dos sens alunos , a K19 
criou o Seguro Treinamento. <br> Ao contratar urn curso, o aluno podera 
refaze-lo quantas vezes desejar mediante a disponibi1idade de vagas e 
pagamento da franquia do Seguro Treinamento. 

</p> 

</body> 

</html> 


Codigo HTML2.161: seguro-treinamento.htmt 


No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/html/public_html/segu.ro-treinamento.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<U5UAR10>/htm1/public_html/seguro-treinamento.html, 

Arquivo: https://github.com/KI9/K19-Exercicios/archive/k02-html-complementar3.zip 


Exerdcio Complementar 2.4 
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2 
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4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 


< ! DOCTYPE htinl > 

<html lang = ' r pt-br' r > 

<head> 

<meta http -equiv = JI Content -Type" content=" text /html ; charset=UTF -8" > 
<title>Caracteres especiais</title> 

</head> 

<body> 

<h1>Caracteres especiais</h1 > 

<p> 

Across; &sext; Sofcir; &check; &sharp; 

</p> 

</body> 

</html> 


Codigo HTML 2.162: caractenes-especiais.html 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/public_html/caracteres-especiais.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/"'<U5LiARIO>/htmI/public_html/caracteres-especiais.html, 

Arquivo: https: //github. com/K!9/K19-Exercicio5/archive/k02-html-complenientar4. zip 


Exerdcio Complementer 2.5 


1 

2 

3 

4 

5 

6 
7 
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9 

10 

11 

12 

13 

14 

15 

16 

17 

18 


<!DOCTYPE html> 

<html lang = "pt-br' 1 > 

<head> 

<meta http-equiv=" Content-Type" content- 11 text/html ; charset = UTF-8" > 
<title>Texto pre-for mat ad c></title> 

</head> 

<body> 

<hl>Texto pre-formatado</h1> 

<pre> 

A B C D E F G 

1 2 3 4 5 6 7 

abed e f g 

</pre> 

</body> 

</html> 


Codigo HTML 2.163: espacos-e-quehras-de-linha.html 


No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/html/publicjitml/espacos-e-quebras-de-linha. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: i /Localhost/~<U5UARIO>/html/public_html/espacos-e-quebras-de-linha.html. 
Arquivo: https: /./github. com/K19/K19-Exercicia5/archive/kQ2-html-complement tar5, zip 
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Exerdcio Complement ar 2.6 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 


< ! DGCT YPE html > 

< ht m 1 lang = "pt-br''> 

<head> 

<meta http-equlv = J| Content-Type p content-" text/html ; charset = UTF -B J| > 
<title>C6digo Java</title> 

</ head> 

<body> 

<hl>C6digo Java</hl> 

<code> 

double numero = Math.random(); 

</code> 

</body> 

</html> 


Codigo HTML 2.164: ccdigo-java.html 


No Windows, utilize o Chrome para acessar o enderego: 


http .‘/yiocalhost/html/public_html/c0diEo- java. html. 


No Ufountu, utilize o Chrome para acessar o enderego: 


http://loca1host/-<USUARIO>/html/public_html/codigo-java.htmL 

At'cjUiUOl https://github.com/K19/K19-Exercicios/archive/k02-html-cofnplementar6, zip 


Exerdcio Complement ar 2.7 


1 

<!DGCTYPE 

2 

<html lanj 

3 

<head> 

4 

<meta 

5 

<t i tli 

6 

</head> 

7 

<body> 

3 

<hl >E 

9 

<ul> 

10 

<11: 

11 

<11: 

12 

<11. 

13 

<11: 

14 

■ >— 1 

i—1 

V 

15 

</ul> 

16 


17 

<p> 

13 

Atu, 

19 

P05 

20 

de 

21 

das 

22 

</p> 

23 

</body> 

24 

</html> 


an tent-Type" content^ 1 ' text / html. ; char set = UTF-B J| > 
elemento b</title> 


i e elemento b</hl> 


aprende; se ja sabes, ensina.</i> (Confucio)</li> 


<b>HTML</b> 3 <b>C5S</b> e <b>JavaScript</b>. 


Codigo HTML 2.165: etemer i tos-i -b. h tml 
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No Windows, utilize o Chrome para acessar o enderego: 


h t1 p: //loca 1 host/html /publ i c_htm 1 /e 1 ement os-i-b.html. 

No Ubuntu, utilize o Chrome para acessar o enderego: 


http: //localhost/~<USUARI(l>/html/public_html/elementos-i-b.htmL 

Arqutvo: https://github.com/K19/K19-Exercicio5/archive/kG2-html-complementary , zip 


Exercicio Complement ar 2.8 


1 <!DOCTVPE html> 

2 chtrnl lang = ,r pt -br "> 

3 <head> 

4 <meta http-equiv= "Content-Type" content^" text/html ; charset=UTF-fl" > 

5 <title>Sao Paulo</title> 

6 </head> 

7 <body> 

3 <hl>Sao Paulo</hl> 

9 <p> 

10 A cidade de Sao Paulo possui uma area de 1.523 km<sup>2</sup>. 

11 Em 2011, Sao Paulo emitiu 16,430 milhdes de toneladas de 

12 C0<sub>2</sub>. 

13 </p> 

14 </body> 

15 </html> 


Codigo HTML 2.166: sao-paulo.html 


No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/html/public_html/sao-paulo.html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http://localhost/™<USUARIO>/html/public_htreil/5ao-paulo.html. 

Arquivo: https://github . com/Kl9/K19-Exercicios/archive/k02-html-complementar8.zip 


Exercicio Complement ar 2.9 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 


<!DGCTYPE html> 

<html lang = Jr pt-br "> 

<head> 

<meta http-equiv = J| Content-Type" content-" text/html ; charset=UTF-S " > 
<title>Sao Paulo FC</title> 

</head> 

<body> 

<hl>Sao Paulo FC</h1> 

<p> 

0 <strong>Sao Paulo FC</strong> e o unico 
time brasileiro que ganhou <em>tres vezes</em> 
o <strong>mundial de clubes</strong>. 

</p> 
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14 

15 


</body> 
</html> 


Codigo HTML 2.167: spfc.. ft f?? 1 1 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/html/public_html/spfc.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<U5UARIQ>/html/public_html/spfc . html. 

Arquivo: https:/Vgithub.com/K!9/K1 9-Exercicio5/archive/k02-html-cofiiplementar9 . zip 


Exercicio Coinpl emeu tar 2.10 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

23 

29 

30 

31 

32 

33 

34 

35 

36 


<JDOCTYPE html> 

<html lang = ' r pt -br' 1 > 

<head> 

<meta http-equiv = ,r Content-Type" content=" text/html ; charset=UTF-S J| > 

<title>Citagbes </ 1itle> 

<7 head> 

<body> 

<P>0 que a Wikipedia fala sobre Java?</p> 

<blockquote ci te=' r http : //en . wikipedia. org/wiki/Java.(programming.language )"> 

<p> 

Java is a general-purpose, concurrent, class-based r object-oriented 
computer programming language that is specifically designed to have 
as few implementation dependencies as possible. ... 

</p> 

<P> 

The original and reference implementation Java compilers t virtual 
machines r and class libraries were developed by Sun from 1991 and 
first released in 1995. As of May 2007, in compliance with the 
specifications of the Java Community Process h Sun relicensed most 
of its Java technologies under the GNU General Public License.... 

</p> 

</blockquote> 

<p> 

Galvao Bueno disse: 

<q ci te= w ht tp : //www. naosalvo . com . br /as -melhoresplores -frases-de-galvao-bueno-em-^ 
-urn-so -lugar ,r > 

A selegao brasileira prioriza o coletivo e a individualidade 
</q >. 

</p> 

<p> 

<cite> Dom Quixote</cite> de Miguel de Cervantes e urn dos livros mais 
vendidos da historia. 

</p> 

</body> 

</html> 


Codigo HTML 2.168: mais-citacoes. htmt 


No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/html/publicjitml/nrais-citacoes.html. 
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No Ubunlu, utilize o Chrome para acessar o endereco: 


http: //local host/xusUARIG^/htnil/public.htffll/ma is-citacoes.html. 

Arquiuo: https: //github . eom/K 1 9 /K1 9-Exerc LCLos/archive/k02-html-complementarl0, zip 


Exercicio Complementar 2.11 


1 

< ! DOCTTPE html > 

2 

<html lang=" pt - b r Jl > 

3 

<head> 

4 

<meta http-equiv=' r Content-Type" content=” text/html ; charset = UTF-8 J| > 

5 

<title>Abreviagoes</title> 

6 

</head> 

7 

<body> 

3 

<h l >Abreviagdes</hi> 

9 

<ul> 

10 

<liXabbr title= H Federal bureau Invest i gat ion ' r >FBI </abbr ></1 i> 

11 

<li><abbr title= ''Central Intelligence Agency H >CIA</abbrx/li> 

12 

<liXabbr title="Crime Scene I n vest i gat ion ">CSI</abbrx / li > 

13 

</ul> 

14 

</body> 

15 

</html> 


Codigo HTML 2.1 69: abbi: h tml 


No Windows, utilize o Chrome para acessar o endereco: 


http: //localhost/html/public_html/abbr. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/'<U5UARIG>/html/public_html/abbr.html. 

Arquiuo: https://github.ccm/K19/K19~Exercicios/archive/k02-html-cofflplementar11 .zip 


Exercicio Complementar 2.12 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 


<!DOCTYPE html> 

<html lang = ' r pt -br' 1 > 

<head> 

<meta http-equiv = *'Content-Type" content-" text/html ; charset=UTF-8" > 

<title>Definigoes</title> 

</head> 

<body> 

<hl>Definigoes</h1> 

<dl> 

<rftxdfn>Folha seca</dfn></dt> 

<dd> 

Chute que faz a bola percorrer uma trajetdria em curva acentuada com 
uma queda brusca no final do percurso. 

</dd> 

<dt><dfn>Lanterna</dfn></dt> 

<dd> 

Equipe que ocupa a ultima posigao de urn campeonato. 

</dd> 
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19 

20 
21 
22 

23 

24 

25 


<dtxdfn>Primeiro pau</dfn></dt> 

<dd> 

Trave ntais prbxima da origem de um cruzam^nto, 
</dd> 

</dl> 

</body> 

<Ahtml> 


Codigo HTML 2.170: mais definicoes. h tml 


No Windows, utilize o Chrome para acessar o endereco: 


http://localhost/html/public_html/mais-definicoes ,h tml. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<U5UARIO>/html/public_html/mais-def inicoes. htsnl. 

ArCfUivo: https://github.com/K19/K19-Exercicio5/archive/k02-htril-complementar 1 2 . zip 


Exercicio Complementar 2.13 


1 <!DOCTVPE html > 

2 <htm 1 lang = ,r pt-br" > 

3 <head> 

4 <meta http-equiv=" Content-Type" content- 1 2 ' text / html ; ch,arset = UTF-8" > 

5 <title>Exemplo de alteragoes</title> 

6 </head> 

7 <body> 

3 <hT>Alt .eragoes</hl> 

9 <p> 

10 <s>AtuaImente, eu moro na Inglaterra, </ s> 

11 <ins>Atualmente , eu moro no Brasil.</iros> 

12 <del>Eu quero conhecer a Siria . </de.l> 

13 </p> 

14 </body> 

15 </html> 


Codigo HTML 2.171: mais-alteracoes.html 


No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/html/public_html/mai£-alteracQes.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/~<U5UARIO>/html/public_htffll/mais-alteracoes.html. 

ArquiVQ: https: //git-vjb con/KIS/KI9-Exercicios/archive/k02-html-cocnpleiiientarl 3 . zip 


Exercicio Complementar 2.14 


1 <!DGCTYPE html> 

2 <htm 1 lang=" pt-br Jl > 
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3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 
19 


<head> 

cmeta http-equiv = ,r Content-Type" content-" text /h-tml; charset = UTF-8" > 
<title>Datas e horas</title> 

</head> 

<body> 

<hl>Datas e horas</hl> 

<ul> 

<li> 

0 Brasil foi pentacampeao em <time datetime^ 1 ' 2002-06-30 " >30 de Junho 
de 2002 </t ime> 

< /1 i > 

<li> 

Ele nao pode esquecer o <time datetime = 31 03-08 JI >Dia das mulheres</time>. 
</li > 

</ul> 

</body> 

</h tml> 


Codigo HTML 2.172: mais-dates, h tmi 


No Windows, utilize o Chrome para acessar o enderego: 


http://localhost/html/public_html/mais-datas.html. 


No UbuntUp utilize o Chrome para acessar o enderego: 


http: .//localhost/~<USUARIG>/html/public_htail/mais-datas. html. 

ArCjltivo: https: //github. com/KIS/KI 9-Exercicios/archive/kG2-html-complementary4. zip 


Exerdcio Complementar 2.15 


1 <!DOCTYPE html> 

2 <html lang = ' r pt-br" > 

3 <head> 

4 <meta http -equiv= ,r Content-Type" content- 1 ' text/html ; charset-UTF-8" > 

5 <title>Texto marcadoc/title> 

6 </head> 

7 <body> 

3 <h1>Texto marcado</hi> 

9 <P> 

10 <mark>Ayrton Senna da 5ilva</mark> foi urn piloto brasileiro de 

11 <mark>Formula l</mark>, tres vezes campeao mondial t nos anos de 1 938,, 

12 1990 e 1991, Foi tambem vice-campeao no controverso campeonato de 1989 

13 e em 1993 

14 </p> 

15 </body> 

16 </html> 


Codigo HTML 2.173: texto-marcado.html 


No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/html/public.html/texto-iriarcado. html. 


No Ubuntu, utilize o Chrome para acessar o enderego: 


http: //localhost/^USllARIOO/html/public.html/texto-marcado.html. 
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ArtjUiVO: https://github.com/K19/K19-Exercicios/archive/kO2-html-conpl0mentarl5,zip 


Exercicio Complement ar 2.16 


1 

2 

3 

4 

5 

6 
7 
3 
9 

TO 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 


<!DOCTYPE html> 
chtml lang="pt-br' r > 

<head> 

<meta http-equiv = " Content-Type |J content= N text/ html ; charset-UTF-S'" > 

<title>Pontos Turisticos</title> 

</ head> 

<body> 

<hl>Pontos Turisticos do Brasil</hl> 

<dl> 

<dt>Ilha Bela - SP</dt> 

<dd> 

Praias r Trilhas e Mergulho em Naufrago. 

</dd> 

<dt >Bonito - MS</dt> 

<dd> 

Mergulho em rios de aguas transparentes , cachoeiras, grutas e cavernas. 
</dd> 

<dt>Museu de Arte de Sao Paulo - SP</dt> 

<dd> 

Grande acervo coin diversas obras de artistas consagrados, 

</dd> 

</dl> 

</body> 

</htmI> 


Codigo HTML 2 . 174: pantos-tumticos.html 


No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/html/public.html/pontos-turisticos. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://lGcalhost/~<U5UARIG>/html/public_html/pontos-turi5ticos . html. 

ArCflliUO: --.ttps: //github . com/KI9/K19-Exercicios/archive/k02-html-cofnplementar16 , zip 


Exerelcio Complement ar 2.17 


1 <!DOCTYPE html> 

2 <htm 1 lang = ,r pt-br''> 

3 <head> 

4 <meta http -equiv = "Content-Type" content-" text/html ; charset=UTF-8" > 

5 <title>Como instalar o seu XPTOc/title> 

6 </head> 

7 <body> 

3 <hl>Como instalar o seu XPTO - K19 Eletronics</hi> 

9 

10 <ol> 

11 <li> 

12 Verifique se todos os acessorios estao presences. 

13 </li> 
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14 

15 

16 

17 

18 
1 3 
20 
21 
22 

23 

24 

25 

26 

27 

28 
23 

30 

31 


<li> 

Coloque o aparelho na horizontal sobre uma superficie plana, 
</ li > 

<li> 

Conecte o aparelho ao computador utilizando um cabo USB, 

</li > 

<li> 

Use o CD-ROM para instalagao do software. 

</li > 

<li> 

Conecte o aparelho a fonte de energia com um adaptador AC, 
</li> 

<li> 

Ligue o aparelho e espere o reconhecimento do computador. 

< /1 i > 

</ol> 

</body> 

</html> 


Codigo HTML 2.175: manual-id S him l 


No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/html/public_html /manual-kl 3. html. 


No Ubuntu ? utilize o Chrome para acessar o endere^o: 


http: //localhost/~<U5UARIO>/html/public_html/mamial-klS. htinl. 

Arqidvo; https://github.com/KIS/KI9-Exercicios/archive/k02-html-complementar 17 , zip 


Exercicio Complementar 2.18 


1 <!DOCTVPE html> 

2 <htm 1 lang = sr pt-br"> 

3 <head> 

4 <meta http-equiv = ,r Content-Type" content-" test /html ; charset=UTF-E" > 

5 <title>Links</title> 

6 </head> 

7 <body> 

8 <h1>Links</h 1 > 

3 <ul> 

10 <li><a href-"http ://www. kl 9 . com. br">K1 9-</a></li> 

11 <li><a href = " ht tp : //www,wikipedia, org / ">Wikiped ia</ a></ li> 

12 <li><a href-" ht tp ://facebook , com ">Facebook</aX/1 i > 

13 </ul> 

14 </body> 

15 </html> 


Codigo HTML2.176: mais-linfa.html 


No Windows, utilize o Chrome para acessar o enderego: 


h 11 p://loca 1 host/html/p ubl i c_h tm 1 /ma i s - 1i nks. h tml . 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/xusUARIG>/html/public_html/mais-links, html. 
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Al'CJUiVO: https://github.com/K19/K19-Exercici0s/archive/kO2-htntl-complementarl8,zip 


Exercicio Complement ar 2.19 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 

23 

24 

25 

26 
27 


< ! DOCTfPE html > 

<html lang = ' r pt -br "> 

<head> 

<meta http-eqyiv = ’" Content-Type " content^" text/html ; char set = UTF-S' 1 > 
<ti tle>Imagens</title> 

</head> 

<body> 

<h1>K19 Treinamentos</h1> 

<img src = ' r http : // www , kl 9 , com , br / css / img/main - header - logo , png" /> 

<h2>Cursos</h2> 

<ul> 

<li> 

<img src = ,r http : // www , kl9 . com . br/f igs/k21 - logo-large .png' 1 /> 

K21 - Persistencia com JPA2 e Hibernate 
</li > 

<li> 

<img src-"http : //www . kl9 . com , br/figs/k22- logo -large .png" /> 

K22 - Desenvolvimento Web Avangado com JSF2, EJB3.1i e GDI 
</li> 

<li> 

<img src-"http : //www . kl9 . com , br / figs/ k23 -logo- large .png' 1 /> 

K23 - Integrate de Sistemas com Webservices, IMS e EJB 
</li > 

</ul> 

</body> 

</html> 


Codigo HTML2.177: mais-imagem.html 


No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/html/publicjrtml/mais- imagens.html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


http: //lQcalhost/^USUARIOO/htffll/public.htffll/mais-imagens.html. 

Al'CfUivo: https://github.com/K19/K19-Exercicios/archive/k02-html-complementarl 9. zip 


Exercicio Complements 2.20 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 


<!DGCTf PE html> 

<html lang = ,r pt-br"> 

<head> 

<meta http -equi v=' r Content - Type" con tent = ,? text / html; char set =UTF -3 |J > 
<ti tle>Tabelas</title> 

</head> 

<body> 

<table> 

<thead> 

<tr> 

<th>Continente/Subcontinente</th> 
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12 

13 

14 

15 

16 
17 
IS 

19 

20 
21 
22 

23 

24 

25 

26 
27 
23 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 

41 

42 

43 

44 

45 

46 

47 
43 

49 

50 

51 

52 


<th>Cidade</th> 

<th>Idiona</th> 

</tr> 

</ thead> 

<tfoot> 

<tr> 

<td colspan= ''3 ff >0ltima atualizagao : 11/2012</td> 
</tr> 

</ tfoot> 

<tbody> 

<tr> 

<td rowspan = r,, 2 r '>Ainerica do Sul</td> 

<td>5ao Faulo</td> 

<td>Portugues</td> 

</tr> 

<tr> 

<td>Cidade do Mexico<7td> 

<td>Espanhol</td> 

</tr> 

<tr> 

<td rowspan=" 3 ”>Asia</td> 

<td>Toquio</td> 

<td>Japones</td> 

<f tr> 

<tr> 

<td>Xangai</td> 

<td>Mandarim</td> 

< /1 r > 

<tr> 

<td>Nova Delhi</td> 

<td>Hindi</td> 

<71 r > 

<tr> 

<td>America do Norte</td> 

<td>Nova Iorque</td> 

<td>Ingles</td> 

</tr> 

</ tbody> 

</table> 

</body> 

</html> 


Codigo HTML 2.178: ma is- tabelas. k tn 1 1 


No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/html/publicjitml/mais-tabelas.html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


http: / Alocalhost/~<USUARIO>/html/public_html/inais-tabelas,html. 

Arcflliuo: https://github. cofn/K19/K19-Exercicio5/archive/k02-html-complementar2Q. zip 


Exerdcio Complement ar 2.2 i 


1 <!DOCTYPE html> 

2 <htm 1 lang^' 1 2 3 4 5 6 pt-br■" > 

3 <head> 

4 <meta http-equiv^ 1 Content-Type” content^ 1 ' text/html ; charset—UTF w 8 ,r > 

5 <title>Curriculo</title> 

6 </head> 
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7 

8 

9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

33 

39 

40 

41 

42 

43 

44 

45 

46 

47 

48 

49 

50 

51 

52 

53 

54 

55 

56 

57 

53 

59 

60 

61 

62 

63 

64 

65 

66 

67 

63 

69 

70 

71 

72 

73 

74 

75 

76 

m 


RESPOSTAS 


<body> 

<hl>Cadastro de Curriculo</h1> 

<form action = JI parametros . php” method-'" post p > 


<fieldset> 

degend>Informa^oes Pessoais</legend> 

dabel for = "' nome.id" >Nome ; </label> 

< input 

id = "' nome_id 
type = ■" text” 
name^ 1 " nome" 

placeholder n Di gite o seu nome 1 ’ 
required> 

<br> 

< lab el f or = "'email, id ''>Emai 1: </label > 

< input 

id = "'email_id r " 
type = -" email"' 
name=" email" r 

placeholder" Digite o seu email" 
required> 

<br> 

dabel for- ,r nascimento_id ">Data de Nascimento; </label> 

< input 

id = " r nasc imento.id " r 
type = "' date" 
name = "' nascimento r " 
required> 

<br> 

dab el f or" 1 altu ra_id J| > Altura (m) : </label> 

< input 

id = " r altura_id " 
type-"nui!iber" 
name^' altura r " 
step = " r 0.01 " 
min= r "0 " 
ma x = r " 2 r " > 

<br> 

<label for= "site_id" >Site: </label> 

< input 

id = Jr s ite_id" 
type = JI url 1,1 
name = "' site" 

placeholder-'" Facebook , Linkedin, Twitter r "> 

<br> 


<label for = ,r 
<select id=" 
<option 
<option 
<opt ion 
<option 
<option 
</select > 
<br> 


estado_civil_id" >Estado Civil; </label> 

es tado_c i vil_id " rcarrte= '" estado-ci vi 1 "> 

value = r " - 1 " >Selecione</opt ion> 

v a 1 ue = " 5" >S ol t e i r o < / o pt ion > 

value = '"C ">Casadodopt ion> 

value = l ’D r ">Divorciado</option> 

value = r " V '">Viiivo</opt ion> 


<label>Sexo: </label> 

< input 

id = "mascullno_id" 
type = "' radio 
name = J| sexo" 
value- 1 " mascul i no '"> 

dab el for-" mascul ino_id '">Masculino</ label > 
dnput 

id=" feminino_id" 
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77 

73 

79 

SO 

31 

82 

S3 

S4 

85 

86 

37 

33 

39 

90 

91 

92 

93 

94 

95 

96 

97 

93 

99 

100 

101 

102 

103 

104 

105 

106 

107 

108 

109 

110 

111 

112 

113 

114 

115 

116 

117 

118 

119 

120 

121 

122 

123 

124 

125 

126 

127 

123 

129 

130 

131 

132 

133 

134 

135 

136 

137 

133 

139 

140 

141 

142 

143 

144 

145 

146 
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type-" radio" 
narae— "sexo ” 
value = " feminine Jl > 

<label f or = " f eroinirto_id " >Feminino</label> 
<br> 

</fieldset > 

<fieldset> 

<legend>En.derego</ legend> 

<label for = l "cep_id ”>CEP : </labei> 

<input 

id = JI cep_id" 
type = 1,1 text" 
name= "cep” 
required> 

<br> 

<label for = 51 endereco_id 11 >Enderego : </labeI> 

< input 

id = " ende reco_id" 
type = ir text" 
name = J| endereco '* 
required> 

<br> 

</fieldset > 

<fieldset> 

<legend>Contato</legend> 

<label for=" teleforce_id" >Telefone: </label> 

< input 

id = " telef one_id Jl 
type = ?r tel" 
name = ,r telefone "> 

<br> 

<label for=" celular_id ">Celular : </label> 

< input 

id = ,r celular_id r ' 
type=" tel ,f 
name^ 1 celular" > 

<br> 

</f ieldset > 

<fieldset> 

<le gend>Con he c intent os </ legend > 

< input 

id="html_id" 
type = " checkbox 13 
n ame = "con h e cimen t os " 
value = " HTML'" > 

< lab el f or = ,r h t m 1 _ i d "> HTML </ label > 

< input 

id="css_id " 
type=" checkbox" 
n a me = ” c on h e c i me n t o s ” 
value=" CSS "> 

< lab el f or = H css_id rJ >C5S<7 label > 

< input 

id = "js_id" 
type = JI checkbox 13 
name = J| con he c intent os ,r 
value=™ JS" > 

<label for = " j s_id ”> JavaScript </ label> 

<br> 
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147 

148 

149 

150 

151 

152 

153 

154 

155 

156 

157 

158 


< label f or = " mais_conheci mentos_id *' >Mai s conhec intent os</ label > 
<textarea 

id = JI mais_eonheci merit os _id 
rows=" 10" 
cols = ,r 20 ™ 

maxlenet h = " 500 Disi te os seus cortheci mentosc/textarea> 

</fieldset > 

<input type=" submi t * l value = " Envi ar "> 

</ form> 

</body> 

</html> 


Codigo HTML 2.179: mais-formularws html 


No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/html/publicjrtml/rnais-farrmilarios, html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http://localhost/™<U5UARIO>/html/poblic_html/mais-formularies.html. 

Artjllivo: https: //github. com/KS9/K19-Exercicios/archive/k02-html-complementar21 . zip 


Questao 2,1 


d 


Questao 2,2 


c 


Questao 2.3 


e 


Questao 2.4 


a 


Questao 2,5 


c 


Questao 2.6 


b 
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Questao 2*7 


d 


Questao 2*8 


e 


Questao 2*9 


e 


Questao 2*10 


a 


Questao 2*11 


d 


Questao 2*12 


c 


Questao 2*13 


e 


Questao 2*14 


b 


Questao 2*15 


a 


Questao 3*1 


e 


Questao 3*2 
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b 


Questao 3*3 


d 


Questao 3*4 


c 


Questao 3*5 


d 


Questao 3*6 


b 


Questao 3*7 


a 


Questao 3.8 


d 


Questao 3*9 


a 


Questao 3.10 


d 


Questao 3.11 


e 


Questao 3.12 


cl 
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Questao 3*13 


d 


Questao 3*14 


e 


Questao 3*15 


c 


Questao 3*16 


e 


Questao 3*17 


d 


Exerclcio Complement ar 4.1 


No projeto javascript, adicione um arquivo chamado exibe-numeros-l-50-2x.html e outro cha- 
ma do exibe-numeros -1 - 50 -2x. js. 

1 

2 

3 

4 

5 

6 

7 

8 
9 

10 


<!DOCTYPE html> 

<html lang = jr pt-br''> 

<head> 

<meta http-equiv- JI Content-Type" content^ text/html . ; charset=UTF-B J| > 
<title>Exibe os numeros de 1 ate 50 duas vezes</title> 

<script type = ,r text / javascript" src = J| exi be - nusne ros - 1 -50-2x . js "></ scri pt > 
</head> 

<body> 

</body> 

</html> 


CodigoHTML 4.56: exibe-numeros-l-50-2x.html 


1 for (var x = 0; x < 2; x++) { 

2 for (var y = 1; y <= 50; y++) { 

3 console . log(y); 

4 1 

5 } 


Codigo Javascript 4.136: exibe-numeros-1 -50-2x.js 


No Windows, utilize o Chrome para acessar o endere^o: 


http: //localhost/javascript/public_html/exibe-numeros- 1 —50— 2x. html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 
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http: //localhost/~<USUARIO>/javascript/public_html/exibe-nuroeros-1 - 50-2x.html. 


Utilize o console do navegador para observar as mensagens exibidas. 

ArtfUivo: https://github.com/K19/K19-Exercicios/archive/kQ2-javascript-coiiipleiiientar1 .zip 


Exercicio Complementar 4.2 


No projeto javascript, adicione urn arquivo chamado exibe-nome-ki9,htmI e outro charnado exibe- 
nome-kI9.js. 

1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DOCT/PE html> 

<html lang = " pt-br' 1 2 3 4 5 6 > 

<head> 

<meta http-equiv=" Content-Type r ' content=" text / html ; charset=UTF -6" > 
<title>Exibe norite e K19</title> 

^script type- ,r text /javascript 11 src = " exi be -norne-kl9 . j s -l ></scr ipt> 

</head> 

<body> 

</body> 

</html> 


Codigo HTML 4.57: exibe-name-kl9.htmt 


1 

2 

3 

4 

5 

6 
7 


for (var x = 0; x < 5; x++) { 

console . log( |J Rafael Cosent i no " } ; 

for (var y = 0; y < 3; y++) { 
console.log( "Kl9 n ); 

} 


Codigo Javascript 4.137: exibe-nome-kl9.js 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_html/exibe-nome-kl9.html. 


No Ubuntu, utilize o Chrome para acessar o endere^o: 


http:/ /local host / ~< USU AR IO> / j a vase r i p t / publ i c_ h tml / e x i be- norite- k19.html. 


Utilize o console do navegador para observar as mensagens exibidas. 

Arquivo: https://github,com/K19/K19-Exercicios/archive/k02-javascript-complementar2.zip 


Exercicio Complementar 4.3 


No projeto javascript, adicione um arquivo chamado multiples-de-tres.html e outro chamado multiplos- 
de-tresjs. 

1 <!DOCTYPE html> 

2 chtml lang="pt-br"> 

3 <bead> 

4 <ineta http-equiv = ,r Content-Type" con t en t = r ' text / htinl ; charset=UTF-S'" > 

5 <title>Multiplos de tres</title> 

6 <script type=" text/javascript" src= "multiplos-de-tres , js "></script> 
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7 

8 
9 

10 


</head> 
<body> 
</body> 
</html> 


Cortigo HTML 4.58: multiplos-de-tres.html 


1 for (var x = 1; x <= 60; x++) { 

2 if (x % 3 3= 0) f 

3 console,log( "*" ) ; 

4 } else f 

5 console.log( p ***" ) 

6 } 

7 1 


Cortigo Javascript 4.138: muttiplos de-tres.js 


No Windows, utilize o Chrome para acessar o endereqo: 


http://localhost/javascript/publicjitml/multiplos-de-tres.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //localhost/'<U5UARIO>/javascript/public_htrol/mult iplos-de-tres , html. 


Utilize o console do navegador para observar as mensagens exibidas. 

Al'CjU ivo: https: //github.com/KIS/KI 9-Exercicios/archive/kG2-javascript-complementar3 . zip 


Exerdcio Complement ar 4,4 


No projeto javascript adicione um arquivo chamado multiplos-de-quatro-e-sete*html e outro cha- 
ma do mult iplos - de - quatro-e-sete. Js. 

1 

2 

3 

4 

5 

6 

7 

8 
9 

10 


<!DOCTYPE h t ml> 

<html lang = jr pt-br'"> 

<head> 

<meta http-equiv = JI Content-Type" content^ 1 ' text/htinl ; charset = UTF-8 " > 

<title>Multiplos de quatro e sete</title> 

<scr ipt type = ' r text/javascript J| src= ,! mult i pi os - de - quatro - e - sete . j s J| ></script> 
</head> 

<body> 

</body> 

</html> 


Cortigo HTML 4.59: ffmltiplos-de-quatro-e-sete.html 


1 for (var x = 1; x <= 80; x++) { 

2 var resto4 = x%4; 

3 var resto? = xK7; 

4 

5 if (resto4 == 0 || resto7 == 0) { 

6 console.log( "*") ; 

7 } else L 

8 console . log(x); 

9 } 

10 } 


Cortigo Javascript 4.139: m ultipfos-de-quatro-e-setejs 
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No Windows, utilize o Chrome para acessar o endereqo: 


http: //localhost/javascript/public_html/mult iplos-de-quatro-e- sete. html. 


No Ubuntu, utilize o Chrome para acessar o endereqo: 


http. A/local host/~<USUARIG>/javascript/pLiblic_hlrnl/multiplos-de-qua tro-e-sete. html. 


Utilize o console do navegador para observar as mensagens exibidas. 

AvCfUiUO: https://github . coti/K } 3 /K19-Exercicios/archive/kOZ-javascript-complementar4.zip 


Exercicio Complement ar 4.5 


No projeto javascript, adicione um arquivo chamado exibe-triangulo*htmI e otitro chamado exibe- 
triangulo.js. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DOCTYPE html > 

<html lang = !r pt -br"> 

<head> 

<meta http-equiv= JI Content-Type" content^ 1 ' test/html ; char set = UTF-S J| > 
<title>Exibe triangulo</title> 

<script t^pe = ‘" text / javascript w src= " exi be -triangulo . js ”></ sc ri pt > 
</head> 

<body> 

</body> 

</html> 


Cddigo HTML 4.60: exibe-trinngulo.htmt 


1 var linha = 

2 for(var contador = 1; contador <= 10; contador++) { 

3 console . log(linha) ; 

4 linha += 

5 1 


Cod!go Javascript 4.140: exibe-iriangu lo js 


No Windows, utilize o Chrome para acessar o endereqo: 


http://localhost/javascript/public_html/exibe-triangulo.html. 

No Ubuntu, utilize o Chrome para acessar o endereqo: 


http: / / loca 1 h ost / ~< USLI AR IO> / j a vase r i p t / publ ic_ h tml/e xibe-1 rian gu1o. html . 


Utilize o console do navegador para observar as mensagens exibidas. 

Arquivo: https://github, com/KIS/Kl9-Exercicios/archive/kG2- javascript-complementar5.zip 


Exercicio Complementar 4,6 


No projeto javascript, adicione uin arquivo chamado exibe-triangulos.html e outro chamado exibe 
triangulos.js. 

1 I<!DOCTfPE html> 
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2 

3 

4 

5 

6 
7 
3 
9 

10 


<html lang = ' r pt-br' 1 > 

<head> 

<meta http - equi v = Jl Content - Type n content- 1 ' text /html ; char set = UTF-8 J| > 
<title>Exibe triangulos</title> 

< script type = ''text/ javascript' 1 src = ''exibe -triangulos , js Jl x/script> 
</head> 

<body> 

</body> 

</html> 


Codigo HTML 4.61: exibe-triangulos.html 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


var linha = 

for(var contador = 1; contador <= 3; contador++) { 
console.log(linha) ; 
var resto = contador % 4; 
if(resto == 0) L 
linha = 

} else L 
linha += 

} 


Codigo Javascript 4. Ml: exibe-trumgutos js 


No Windows, utilize o Chrome para acessar o enderego: 


http: //localhost/javascript/publicjitml/exibe-triangulos. html. 


No Ufountu, utilize o Chrome para acessar o endereco: 


http: //localhost/~<USLIARI0>/javascript/public_html/exibe-triangulos. html. 


Utilize o console do navegador para observar as mensagens exibidas. 

Arquivo: https://github. com/Ki;97K19-Exercicios/archive/k02-javascript-complementare. zip 


Exercicio Complementar 4.7 


No projeto javascript, adicione um arquivo chamado fiboimacLhtml e outro chamado fibonnaci.js. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DOCTYPE html > 

<html lang = ,r pt-br"> 

<head> 

<meta http -equiv = : " Content -Type" con t en t = " text /html ; char set = UTF -fi" > 
<title>Fibonacci</title> 

<scr ipt type- 1 ' text / javascript " src = JI f ibonnaci - js |J ></ scri pt > 

</ head> 

<body> 

</body> 

</html> 


Codigo HTML 4.62: fibonnaci.htmt 


1 var penultimo = 0; 

2 var ultimo = 1; 

3 

4 console.logfpenultimo); 

5 console.log(ultimo); 

6 

7 for(var contador = 0; contador < 2S; contador*+) i 
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3 

9 

10 

11 

12 

13 


var proximo = penultimo + ultimo; 
console.log (proximo); 

penultimo = ultimo; 
ultimo = proximo; 


Codigo Javascript 4 .1 42: fibonnaci.js 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_htinl/f ibonnaci.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


h 11 p: V /loca 1h ost/~<USUARIO>/j avase ri p t/public_ h tml/fibonna c i . h tml . 


Utilize o console do navegador para observar as mensagens exibidas. 

ArCfUiVO; https: //github. com/KI9/K19-£xercicios/archive/k02-javascript-complementer7.zip 


Exercicio Complementar 4.8 


No projeto javascript, adicione um arquivo chamado embaralha.html e outro chamado embara- 
Iha.js. 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 


<!DOCTYPE html > 

<html lang = ’ r pt -br" > 

<head> 

<meta http-equiv = J| Content-Type" content^ " test/html ; charset=UTF-B" > 
<title>Embaralha</title> 

< script type = JI text/ javascript" src= '' embaralha , js |J >< / scri pt > 

<7head> 

<body> 

</body> 

</html> 


Godigo HTML 4.63: embamlha.html 


1 

2 

3 

4 

5 

6 
7 
3 
3 

10 

11 

12 

13 

14 

15 

16 
17 
13 

19 

20 
21 
22 
23 


var array = new Array(10); 

for(var i = 0; i < array.length; i++)-[ 
array[i] = i; 

} 

for(var i = 0; i < array.length; i++){ 
console.log(array[i]) ; 

1 

for(var i = 0; i < 10; i++){ 

var posicaol = Math.floor(Math.random() * 10); 
var posicao2 = Math.floor(Math.random() * 10); 
var auxiliar = array[posicaol ]; 

array[posicaol ] = array[posicao2]; 
array[posicao2] = auxiliar; 

} 

console . log ( ” -- " ) ; 

for(var i = 0; i < array. length; i++)-[ 
console.log(array[i]) ; 
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Codigo Javascript 4.143: embamtha.js 


No Windows, utilize o Chrome para acessar o endere^o: 


http://localhost/javascript/public_htnl/embaralha.html. 


No Ubunlu, utilize o Chrome para acessar o enderego: 


h 11 p://loca 1 host/™<USU ARIQ>/javascript/py blic_ html/emba ralha.html. 


Utilize o console do navegador para observar as mensagens exibidas. 

Arcjuivo: https : //github.cam/KIS/KI 9-Exercicios/archive/k02- javascript-CQmplementarfl.zip 


Exerdcio Complement ar 4.9 


No projeto javascript, adicione um arquivo chamado ordena.html e outro chamado ordena.js. 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 


<!DOCTYPE html > 

<html lang = ,r pt -br "> 

<head> 

<meta http-equiv = JI Content-Type" content = IJ text/html. ; charset=UTF-8 " > 
<title>Ordena</title> 

<script type=" text / javascript Jl src = " ordena . js Jl ></ scr ipt> 

</head> 

<body> 

</body> 

</html> 


Codigo HTML 4.64: ordena.html 


1 

2 

3 

4 

5 

6 
7 
3 
9 

10 

11 

12 

13 

14 

15 

16 
17 


var array = now Array(10); 

for(var i = 0; i < array.length ; i++){ 

array[i] = Math.floor(Math,random() * 10); 

} 

for(var i = 0; i < array.length; i++){ 
console.log(array[i]); 

1 

array.sort{) ; 

console . log( " - " ) ; 

for(var i = 0; i < array.length; i++){ 
console.log(array[i1); 

?■ 


Codigo Javascript 4.144: ordetm.js 


No Windows, utilize o Chrome para acessar o enderego: 


h ttp://localhost/javascript/public_html/ordena.html. 


No Ubuntu, utilize o Chrome para acessar o endereco: 


http: //loca 1 host/^< USU AR I(W j a vase ript/pyblic_html/ordena. html. 
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Utilize o console do navegador para observar as mensagens exibidas. 

ArquiVO: bttps://gitnub cort/KtS/ICt9-Exercicios/archive/k02-javascript-complementar9.zip 


Questao 4.1 


e 


Questao 4.2 


a 


Questao 4.3 


e 


Questao 4.4 


c 


Questao 4.5 


a 


Questao 4.6 


c 


Questao 4.7 


b 


Questao 4.8 


d 


Questao 4.9 


e 


Questao 4.10 
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b 


Questao 4.11 


c 


Questao 5.1 


a 


Questao 5.2 


e 


Questao 5.3 


a, d 


Questao 5.4 


d 


Questao 5.5 


c 


Questao 5.6 


tod as as alternatives estao cor r etas 


Questao 5.7 


b 
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